Social login (OAuth)

Learn how to effortlessly add social login to your application using popular OAuth providers like Google, Facebook, Github and more.

Overview

Clerk makes it easy to add social login capabilities to your application. Social login is designed to simplify the sign up and sign in processes for the end user, resulting in higher conversion rates, a streamlined user data collection flow and an overall better user experience.

Pre-built Clerk <SignIn/> component with Facebook and Google social login

Social login provides better security than passwords and other long-lived knowledge-based secrets. With social login, users gain frictionless access to your application by using their existing credentials from an OAuth provider (Google, Facebook, Twitter etc) without having to go through complicated registration flows.

When using social login, the sign up and sign in flows are equivalent. If a user doesn't have an account and tries to sign in, an account will be made for them, and vice versa.

The easiest way to add social login is by using our prebuilt Clerk Hosted Pages or Clerk Components. If you prefer a more custom solution, check out how to build a completely custom social login flow.

Before you start

Configuration

To enable a social login provider, go to the Clerk Dashboard, select your Application, and navigate to Instances āžœ Settings āžœ User Management āžœ SSO.

Social login configuration consists of the following steps:

  1. Enable the providers you want to use.

  2. (production instances only) Enter your OAuth credentials (Client ID and Client Secret) for each provider

  3. (production instances only) Copy the Authorized redirect URI from the Clerk Dashboard to the provider's app configuration.

Enabling social login providers

Clerk supports the following providers: Facebook, Google, Github, Hubspot and Tiktok. For the purposes of this guide we will enable social login with Google.

We are constantly adding more providers. If you're interested in a provider we don't support yet, let us know!

In development, after applying these changes, you're good to go! To make the development flow as smooth as possible, Clerk uses preconfigured shared OAuth credentials and redirect URIs. Navigate to your sign in or sign up page to see it in action šŸ™‚

Shared OAuth credentials should not be treated as secure. For this reason, we don't allow them in production.

Entering the credentials for an OAuth provider

For production instances, you will need to create your own account with Google and generate your own Client ID and Client secret. You can add these by pressing the Manage credentials button under the respective provider. For more details, check out the following guides:

Finally, copy the Authorized redirect URI field and add it to the provider's app configuration dashboard. For more details, check out the following guides:

Don't forget to click Apply Changes button at the bottom of the page once you're done.

Using Clerk Hosted Pages

If you're looking for the fastest way to implement social login based authentication, you can leverage Clerk Hosted Pages for your sign up, sign in, and user profile pages. You can set these up on your own domain, and match your websites theme with the Clerk Dashboard to create a seamless experience.

You can find your instances sign up and sign in links in the Home > Instance configuration section of your instance in Clerk Dashboard.

Sign up and sign in links for Clerk Hosted Pages

By default, the URLs for your hosted pages will match the following pattern:

https://accounts.[your-domain].com/sign-in
https://accounts.[your-domain].com/sign-up
https://accounts.[your-domain].com/user

For development instances, Clerk will issue you a domain on "lcl.dev". In production, you'll need to supply your own domain. See Production setup or more information

Clerk provides SDKs to make navigating to these pages easy.

Clerk React
Clerk.js
Clerk React
import {
useClerk,
RedirectToSignIn,
RedirectToSignUp
} from "@clerk/clerk-react";
ā€‹
// Rendering the <RedirectToSignIn/> component will
// cause the browser to navigate to the Sign In URL
// and show the hosted Sign In page
function MyRedirectToSignIn() {
return (
<RedirectToSignIn/>
)
}
ā€‹
// Rendering the <RedirectToSignUp/> component will
// cause the browser to navigate to the Sign Up URL
// and show the hosted Sign Up page
function MyRedirectToSignUp() {
return (
<RedirectToSignUp/>
)
}
ā€‹
// You can also trigger a redirect programmatically
// by calling the redirectToSignUp or redirectToSignIn
// methods
function MyButtonRedirect() {
const {redirectToSignUp, redirectToSignIn} = useClerk();
ā€‹
return (
<>
<button onClick={redirectToSignUp}>
Redirect to hosted Sign Up page
</button>
<button onClick={redirectToSignIn}>
Redirect to hosted Sign In page
</button>
</>
)
}
ā€‹
Clerk.js
// Calling the redirectToSignUp method will
// cause the browser to navigate to the Sign In URL
// and show the hosted Sign Up page
window.Clerk.redirectToSignUp();
ā€‹
// Calling the redirectToSignIn method will
// cause the browser to navigate to the Sign In URL
// and show the hosted Sign In page
window.Clerk.redirectToSignIn();

Read our detailed Clerk Hosted Pages guide to learn more.

Using Clerk Components

šŸ‘‰ Demo šŸ‘©ā€šŸ’» Example repo ā€‹

To further customize your sign up and sign in pages, you can use Clerk Components to easily add authentication anywhere. Doing so will let you add a custom background, modify CSS, and much more. In fact, Clerk's own sign up and sign in pages follow this approach.

Pre-built Clerk <SignUp/> component with Google social login, mounted in a NextJS app

Clerk provides the <SignUp/> and <SignIn/> prebuilt components that render a conversion-optimized sign up and sign form.

Note that you don't need to pass any special props to the <SignUp/> and <SignIn/> components, it will automatically display the configuration you chose in the Clerk Dashboard.

When using social login, the sign up and sign in flows are equivalent. If a user doesn't have an account and tries to sign in, an account will be made for them, and vice versa.

Showing a sign in form with social login is as simple as rendering the <SignIn/> component:

Clerk React
Clerk.js
Clerk React
import { SignUp } from "@clerk/clerk-react";
ā€‹
// SignInPage is your custom sign in page component
function SignInPage() {
return (
<SignIn />
);
}
Clerk.js
<html>
<body>
<div id="sign-up"></div>
<script>
const el = document.getElementById("sign-up");
// Mount the pre-built Clerk SignUp component
// in an HTMLElement on your page.
window.Clerk.mountSignUp(el);
// Alternatively, you can open the SignUp
// component as a modal
window.Clerk.openSignUp();
</script>
</body>
</html>

In the same fashion, render the <SignUp/> component to show a sign up form with social login:

Clerk React
Clerk.js
Clerk React
import { SignUp } from "@clerk/clerk-react";
ā€‹
// SignUpPage is your custom sign up page component
function SignUpPage() {
return (
<SignUp />
);
}
Clerk.js
<html>
<body>
<div id="sign-in"></div>
<script>
const signInEl = document.getElementById("sign-in");
// Mount the pre-built Clerk SignIn component
// in an HTMLElement on your page.
window.Clerk.mountSignIn(signInEl);
// Alternatively, you can open the SignIn
// component as a modal
window.Clerk.openSignIn();
</script>
</body>

And you're done! šŸŽ‰

The above examples don't require any specific routes to be defined, they automatically use the Clerk Hosted Pages to handle the required OAuth redirects. If you prefer having the mounted <SignIn/> and <SignUp/> components handle the OAuth redirects instead, you need to follow some additional steps:

From the Clerk Dashboard, select your Application, navigate to Instance āžœ Settings āžœ URLs & redirects āžœ Component URLs. Change the Sign Up URL to /sign-up and the Sign In URL to /sign-in.

Finally, in your app define a /sign-up route that renders the <SignUp /> component. Similarly, define a /sign-inroute that renders the <SignIn /> component as shown in the following example. Refer to the <SignIn/> and <SignUp/> docs to learn more about the routing and path props.

The React example below uses react-router-domto define the routes. For more info, take a look at the example repo or consult the URLs & redirects docs.

Clerk React
Clerk React
import { SignUp, SignIn } from "@clerk/clerk-react";
import { Route, Switch, useHistory } from 'react-router-dom';
ā€‹
function App() {
const { push } = useHistory();
ā€‹
return (
<ClerkProvider frontendApi={"[your-frontend-api]"} navigate={to => push(to)}>
<Switch>
<Route path='/sign-in'>
<SignIn routing='path' path='/sign-in' />
</Route>
<Route path='/sign-up'>
<SignUp routing='path' path='/sign-up' />
</Route>
</Switch>
</ClerkProvider>
);
}

Custom social login flow

Coming soon...

ā€‹

ā€‹