Which frontend SDK do you use?
supertokens-web-js / mobile
supertokens-auth-react
1. Configuration
#
1) Install supertokens packageyarn add supertokens-node supertokens-auth-react nextjs-cors
#
2) Create configuration files- Create a
config
folder in the root directory of your project - Create an
appInfo.ts
inside theconfig
folder. - Create a
backendConfig.ts
inside theconfig
folder. - Create a
frontendConfig.ts
inside theconfig
folder. - An example of these files can be found here.
appInfo
configuration. #
3) Create the /config/appInfo.ts
export const appInfo = { // learn more about this on https://supertokens.com/docs/thirdpartyemailpassword/appinfo appName: "<YOUR_APP_NAME>", apiDomain: "<YOUR_API_DOMAIN>", websiteDomain: "<YOUR_WEBSITE_DOMAIN>", apiBasePath: "/auth", websiteBasePath: "/auth"}
#
4) Create a frontend config functionHow do you want to identify your users?
Only phone numberOnly emailEmail or phone number
#
5) Create a backend config functionHow do you want to identify your users?
Only phone numberOnly emailEmail or phone number
Which authentication type will you use?
OTPMagic linksOTP and Magic link
#
6) Set up your email / sms delivery methodHow do you want to identify your users?
Only phone numberOnly emailEmail or phone number
init
functions and wrap with <SuperTokensWrapper>
component #
7) Call the frontend - Create a
/pages/_app.tsx
file. You can learn more about this file here. - An example of this can be found here
/pages/_app.tsx
import '../styles/globals.css'import React from 'react'import { AppProps } from 'next/app'import SuperTokensReact, { SuperTokensWrapper } from 'supertokens-auth-react'
import { frontendConfig } from '../config/frontendConfig'
if (typeof window !== 'undefined') { // we only want to call this init function on the frontend, so we check typeof window !== 'undefined' SuperTokensReact.init(frontendConfig())}
function MyApp({ Component, pageProps }: AppProps) { return ( <SuperTokensWrapper> <Component {...pageProps} /> </SuperTokensWrapper> );}
export default MyApp