Skip to main content

1. Configuration

1) Install supertokens package#

yarn add supertokens-nodeyarn add supertokens-auth-reactyarn add nextjs-cors

2) Create configuration files#

  • Create a config folder in the root directory of your project
  • Create an appInfo.js inside the config folder.
  • Create a backendConfig.js inside the config folder.
  • Create a frontendConfig.js inside the config folder.
  • An example of these files can be found here.

3) Create the appInfo configuration.#

Please fill the form below to see the code snippet (* = Required)
Your app's name:*
This is the name of your application
API Domain:*
This is the URL of your app's API domain, without any path.
Website Domain:*
This is the URL of your website, without any path.
Fill form to submit

4) Create a frontend config function#


import ThirdPartyEmailPasswordReact from 'supertokens-auth-react/recipe/thirdpartyemailpassword'import SessionReact from 'supertokens-auth-react/recipe/session'import { appInfo } from './appInfo'
export const frontendConfig = () => {  return {    appInfo,    recipeList: [      ThirdPartyEmailPasswordReact.init({        signInAndUpFeature: {          providers: [            ThirdPartyEmailPasswordReact.Google.init(),            ThirdPartyEmailPasswordReact.Facebook.init(),            ThirdPartyEmailPasswordReact.Github.init(),            ThirdPartyEmailPasswordReact.Apple.init(),          ],        },      }),      SessionReact.init(),    ],  }}

5) Create a backend config function#

Please fill the form below to see the code snippet (* = Required)
API Domain:*
This is the URL of your app's API domain, without any path.
Website Domain:*
This is the URL of your website, without any path.
Fill form to submit

6) Call the init functions#

  • Create a /pages/_app.js file. You can learn more about this file here.
  • An example of this can be found here

7) Add API interceptors for automatic session refreshing#

Do you use axios on your frontend?
YesNo
Refresh the page to undo your selection