{ "componentChunkName": "component---src-pages-blog-markdown-remark-fields-slug-js", "path": "/blog/adding-social-login-to-your-website-with-supertokens", "result": {"data":{"markdownRemark":{"html":"

This tutorial walks you through building your own social login UI using SuperTokens.

\n
\n

Note, that it’s only meant for users who are building their own frontend and are building a website. This blog is not meant for users using our pre-built UI.

\n
\n

To start off, you want to make sure that you have finished the frontend and backend quick setup guides for the recipe that you have chosen.

\n

As of this writing, that’s either:

\n\n

For ease of explanation, we will assume the following:

\n

We want to implement sign in with GitHub

\n\n

On a high level, there are two steps to the flow:

\n\n

Step 1

\n

When the user clicks on Sign in with GitHub button, you want to call the following function using the supertokens-web-js SDK

\n\n \n \n \n \n
import ThirdPartyEmailPassword from \"supertokens-web-js/recipe/thirdpartyemailpassword\"\n\nasync function loginWithGitHubClicked() {\n  let githubAuthURL = await ThirdPartyEmailPassword.getAuthorisationURLWithQueryParamsAndSetState({\n    authorisationURL: \"http://localhost:3000/auth/callback/github\",\n    providerId: \"github\"\n  })\n\n  // an example value of githubAuthURL is\n  // https://github.com/login/oauth/authorize?scope=read%3Auser+user%3Aemail&client_id=21d82062d1f35b68e66c\n\n  // we redirect the user to sign in with github\n  window.location.href = githubAuthURL\n}
\n

The URL returned in the response of calling getAuthorisationURLWithQueryParamsAndSetState is where you will redirect your user to.

\n

Step 2

\n

When the user is navigated back to your app (from GitHub), the URL will contain a code query param (on successful login), like this:

\n

http://localhost:3000/auth/callback/github?code=3cf143e0af0f1bed8d34

\n

First, you want to create a page on your frontend app which will handle this route (/auth/callback/github). On this page, you want to show a loading spinner, and call the following function from our SDK:

\n\n \n \n \n \n
import ThirdPartyEmailPassword from \"supertokens-web-js/recipe/thirdpartyemailpassword\"\n\nasync function consumeAuthCodeAndLoginUser() {\n  let result = await ThirdPartyEmailPassword.thirdPartySignInAndUp();\n\n  if (result.status === \"OK\") {\n    if (result.createdNewUser) {\n      // user sign up\n    } else {\n      // user sign in\n    }\n  } else {\n    // TODO: this means that the user does not have\n    // an email associated with their GitHub account.\n    // Ask them to sign in using another method.\n  }\n}
\n

When we call the thirdPartySignInAndUp function, it extracts the code from the query params and sends it to the backend. The backend then exchanges that code with Github to get the user’s information and create a new session.

\n

Where are the session tokens?

\n

From inspecting the result variable from the above code snippet, we don’t see an access token / JWT in the response body - so where are they?

\n

SuperTokens issues session cookies that get sent via the Set-Cookie header in the API response and is automatically handled by the browser.

\n

\n \n \n \n \n

\n

Furthermore, our frontend SDK handles these session tokens for you automatically:

\n
    \n
  • Automatic refresh of session
    • \n
  • Automatic injection of the access token for your API calls
    • \n
  • Provides a signOut function
    • \n
\n

These features are a part of the session recipe that you initialized when following the quick setup guide.

\n

Conclusion

\n

We have seen how to integrate your custom UI with the social login functions exposed by SuperToken’s frontend SDK. Furthermore, we see that on successful login, we are issued cookie based session tokens which are handled automatically by SuperTokens.

","frontmatter":{"date":"January 26, 2022","title":"Adding social login to your website with SuperTokens (custom UI only)","cover":"adding-social-login-to-your-website-with-supertokens.png","author":"Rishabh Poddar","description":"This blog walks you through integrating your frontend with social login APIs provided by SuperTokens."},"fields":{"slug":"/adding-social-login-to-your-website-with-supertokens/"}},"site":{"siteMetadata":{"title":"SuperTokens Blog"}}},"pageContext":{"id":"3dd32e6e-0a18-5501-8f6e-45384f2d2d5b","fields__slug":"/adding-social-login-to-your-website-with-supertokens/","__params":{"fields__slug":"adding-social-login-to-your-website-with-supertokens"}}}, "staticQueryHashes": []}