React Installation (5 mins)
For framework specific implementation (like Next.js), please skip this section and go directly to the section with the name of your framework.
This library provides a set of modules that you can add to your React application to implement authentication.
found here.
An example implementation can be1️⃣ npm install
npm i -s supertokens-auth-react
init
function
2️⃣ Call the Then in your App.js
file, import SuperTokens and call the init
function. Please make sure to replace all the appInfo
configurations values with yours.
import React from 'react';
import SuperTokens from "supertokens-auth-react";
import ThirdPartyEmailPassword, {Github, Google, Facebook} from "supertokens-auth-react/recipe/thirdpartyemailpassword";
import Session from "supertokens-auth-react/recipe/session";
SuperTokens.init({
appInfo: {
appName: "YOUR APP NAME", // Example: "SuperTokens",
apiDomain: "YOUR API DOMAIN", // Example: "https://api.supertokens.io",
websiteDomain: "YOUR WEBSITE DOMAIN" // Example: "https://supertokens.io"
},
recipeList: [
ThirdpartyEmailPassword.init({
signInAndUpFeature: {
providers: [
Github.init()
Google.init()
Facebook.init()
]
}
}),
Session.init()
]
});
/* Your App */
class App extends React.component {
render() {
return (...)
}
}
3️⃣ Setup routes
Enabling routing will allow SuperTokens to insert components in specific pages, such as for Sign-up / Sign-in page.
Call the getSuperTokensRoutesForReactRouterDom
method from within any react-router-dom
Switch
component.
import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import SuperTokens, { getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react";
import ThirdPartyEmailPassword from "supertokens-auth-react/recipe/thirdpartyemailpassword";
import Session from "supertokens-auth-react/recipe/session";
SuperTokens.init({
// Previously added configs
});
class App extends React.Components {
render() {
return (
<Router>
<YourNavBar/>
<Switch>
{getSuperTokensRoutesForReactRouterDom()}
{...}
</Switch>
<YourFooter />
</Router>
);
}
}
If you use a custom routing system in your React application, you can add SuperTokens routes via:
import React from 'react';
import SuperTokens from "supertokens-auth-react";
class App extends React.Components {
render() {
if (SuperTokens.canHandleRoute()) {
return SuperTokens.getRoutingComponent()
}
return (
(...)
);
}
}
4️⃣ Protect your application with the Authentication wrapper
Use ThirdPartyEmailPasswordAuth
component in order to protect authenticated parts of your application:
import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import SuperTokens, { getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react";
import ThirdPartyEmailPassword, {ThirdPartyEmailPasswordAuth} from "supertokens-auth-react/recipe/thirdpartyemailpassword";
import Session from "supertokens-auth-react/recipe/session";
SuperTokens.init({
// Previously added configs
});
class App extends React.Components {
render() {
return (
<Router>
<YourNavBar/>
<Switch>
{getSuperTokensRoutesForReactRouterDom()}
<Route path="/dashboard">
<ThirdPartyEmailPasswordAuth>
// Components that require to be protected by authentication
</ThirdPartyEmailPasswordAuth>
</Route>
// Other components without authentication
{...}
</Switch>
<YourFooter />
</Router>
);
}
}
import React from 'react';
import SuperTokens from "supertokens-auth-react";
import {ThirdPartyEmailPasswordAuth} from "supertokens-auth-react/recipe/thirdpartyemailpassword";
class App extends React.Components {
render() {
if (SuperTokens.canHandleRoute()) {
return SuperTokens.getRoutingComponent()
}
return (
<ThirdPartyEmailPasswordAuth>
// Components that require to be protected by authentication
</ThirdPartyEmailPasswordAuth>
);
}
}
axios
session interceptor
5️⃣ Add This step is only applicable if you are using
axios
Add the interceptor for each axios
import call
import axios from "axios";
import Session from "supertokens-auth-react/recipe/session";
Session.addAxiosInterceptors(axios);
async function callAPI() {
// use axios as you normally do
let response = await axios.get(...);
}
An example of this can be found in our demo app.
Frontend setup completed 🎉🥳
If you navigate to /auth
in your application, you should see the SuperTokens Sign-up / Sign-in widgets.
At this stage, you've successfully integrated your website with SuperTokens. The next section will guide you through setting up your backend.