Account Kit makes it really easy to authenticate your users using a number of different authentication methods. If you followed the quickstart, then your app is already setup to authenticate users and you can skip this guide!

We'll show you two different ways to authenticate users:

1. Using our UI components to handle the entire authentication flow.
2. Using our React hooks to build your own custom UI.

If you haven't followed the quickstart guide, make sure to set up the following first:

1. Create a config in the dashboard Go to the accounts page of the dashboard. From here you can create a new config or use an existing one.

   1. To enable email authentication, in the Redirect URL field add the link that the user will be redirected to when they click the magic link in the email.

      

   2. To enable social authentication, toggle the respective authentication methods you want to enable. Add the link that your dapp will be running on in the Apply whitelisted origin field. You may also include your own Client ID and Client Secret.

   

2. Include config API key in your dapp

Copy the API Key from your account config

...and paste the API key into your app's config.ts

// ...other stuff in the file
export const config = createConfig(
  {
    transport: alchemy({ apiKey: "your_api_key" }), // TODO: add your Alchemy API key - setup your app and embedded account config in the alchemy dashboard (https://dashboard.alchemy.com/accounts) - if you don't want to leak api keys, you can proxy to a backend and set the rpcUrl instead here
    chain: sepolia,
    ssr: true, // defers hydration of the account state to the client after the initial mount solving any inconsistencies between server and client state (read more here: https://accountkit.alchemy.com/react/ssr)
    storage: cookieStorage, // persist the account state using cookies (read more here: https://accountkit.alchemy.com/react/ssr#persisting-the-account-state)
    enablePopupOauth: true, // must be set to "true" if you plan on using popup rather than redirect in the social login flow
  },
  uiConfig
);
// ...other stuff in the file

Now you can setup your application's logic and UI to handle authentication! You'll be able to integrate authentication in one of two ways:

1. Using our UI components to handle the entire authentication flow.
2. Using our React hooks to build your own custom UI.