Skip to main content

If you are using our backend SDK that is lesser than the following versions, please visit the older documentation link here.

Frontend Integration

Supported frameworks#

React logoVue.js logoAngular logoElectron logoCapacitor.js logoJavascript logo
for mobile apps

For mobile apps, please see the "Using your own UI" section (see left nav bar)

Automatic setup using CLI

Run the following command in your terminal.

npx create-supertokens-app@latest --recipe=thirdpartyemailpassword

Once this is done, you can skip Step (1) and (2) in this section (see left nav bar) and move directly to setting up the SuperTokens core (Step 3).

Or, you can manually integrate SuperTokens by following the steps below.

Manual setup steps below

1) Install#

npm i -s supertokens-auth-react

2) Call the init function#

import React from 'react';

import SuperTokens, { SuperTokensWrapper } from "supertokens-auth-react";
import ThirdParty, { Github, Google, Facebook, Apple } from "supertokens-auth-react/recipe/thirdparty";
import EmailPassword from "supertokens-auth-react/recipe/emailpassword";
import Session from "supertokens-auth-react/recipe/session";

SuperTokens.init({
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"
},
recipeList: [
ThirdParty.init({
signInAndUpFeature: {
providers: [
Github.init(),
Google.init(),
Facebook.init(),
Apple.init(),
]
}
}),
EmailPassword.init(),
Session.init()
]
});


/* Your App */
class App extends React.Component {
render() {
return (
<SuperTokensWrapper>
{/*Your app components*/}
</SuperTokensWrapper>
);
}
}

3) Setup Routing to show the login UI#

Do you use react-router-dom?
YesNo

4) View the login UI#

You can view the login UI by visiting /auth. You can also see all designs of our pre built UI, for each page on this link.

At this stage, you've successfully integrated your frontend with SuperTokens. The next section will guide you through setting up your backend.

Looking for older versions of the documentation?
Which UI do you use?
Custom UI
Pre built UI