Jun 03, 2022
Jun 03, 2022
Build an app with complete authentication and a user switcher just like gmail has.
Developing an authentication system from scratch can be time-consuming, and the process can be prone to bugs. If you're looking for a customer identity platform that provides user management features like authentication, authorization, and management of user profiles, roles, and permissions, check out Clerk. Clerk can save you time when it comes to building and testing your authentication flow. It also provides multi-session authentication, which allows users to seamlessly log in and switch between different accounts.
Clerk is a one-stop solution for authentication and customer identity management. It helps you build a flawless user authentication flow that supports logging in with a password, multifactor authentication, or social logins with providers like Google, LinkedIn, Facebook, and GitHub. Clerk provides components like
<SignIn/> that you can plug into your application right away to quickly build an authentication flow.
It's common for users to have multiple accounts for different purposes. For instance, you may have a personal YouTube channel for your friends and family, and another one specifically intended for your audience in your work as a developer. With Clerk’s multisession feature, you can seamlessly and intuitively switch between both accounts as needed.
Create your Clerk account by following the steps on their website. Once registered, navigate to the Clerk dashboard, where you'll begin this tutorial:
To set up the project, run
npx create-next-app clerk-app in your terminal. This will initialize a Next.js project. Then you need to run
npm install @clerk/nextjs inside the project and open your Clerk dashboard in a web browser. In the left navigation, click on API Keys and copy the Frontend API key, Backend API keys and JWT verification key:
Save the keys copied above in a
.env.local file inside your project:
The authentication flow of your application dictates how the users access different parts of your application. In this example, the user authentication flow works like this:
To begin, implement the authentication flow in the `pages/_app.js`:
Next.js uses file-system-based routing, which makes it easy to create new pages. To learn more about Next.js routing check out their official documentation.
To create the sign-up and sign-in pages, navigate to the
pages/ folder in your project and create two new folders:
sign-in/. Then create a new
[[...index]].js file inside both of these folders. These routes will catch all the paths, including
/sign-in. You can read more about dynamic routing in the Next.js documentation.
Use the prebuilt components for
<SignUp/> to populate the pages:
Now, the home page should display the greeting "Welcome to your new app." at the top of the page. If the user is signed in, it will show them their profile page. Otherwise, it will ask them to sign up or sign in:
Update the `pages/index.js` file to use the `<SignedIn/>` component to conditionally render the child components if the user is signed in and use the `<SignedOut/>` component to render the child components if the user isn't signed in.
Inside the `<SignedIn/>` component, use the `<UserProfile/>` component provided by Clerk to show the user's profile details and allow them to edit their information.
You can also use the `<UserButton />` component in the top `<nav />` to allow users to manage their accounts and sign out of the application. The `<UserButton />` will render as a button with the user's avatar.
Inside the `<SignedOut/>`, render two `<Link />` components to send the user to the sign-in or sign-up page:
If the user isn't signed in, the page will look like this:
Or if the user is signed in, it will look like this:
When you click the user avatar at the top-right of your screen, a pop-up will appear containing buttons for Manage account and Sign out:
Before moving on with this tutorial, you need to navigate to your Clerk dashboard and enable the Multi-session handling feature inside the Sessions settings:
After enabling multisession handling, go back to your application window and click on the user avatar again. Now you'll see that a new option, Add account, is available:
Clicking on the Add account button will redirect users to the sign-in page, where they can sign in or sign up for a new account.
After signing in, Clerk will redirect the user back to the application with the new session, and the avatar pop-up menu will show all active sessions. The user can now switch between accounts by selecting them from the list:
To prevent malicious requests from coming through, it's essential to authenticate your API endpoints. With Clerk, you can access the user's authentication status in the Next.js API handlers. To do that, you must wrap your API handler function inside Clerk's
withAuth higher-order function to access the
auth property on the request object.
The following example uses the
request.auth property to check if the
sessionId is available and then sends the
userId in the response. Otherwise, it returns a
401: Unauthorized response code:
On the home page, add a button to request the API endpoint and show the user ID in an alert:
After you've added this button, your user switcher is ready:
After completing this tutorial, you will have successfully built a Next.js application that supports multisessions. While doing so, you learned about creating a new Next.js application, setting up a Clerk account, and integrating the Clerk SDK with your Next.js application.
You used the UI components provided by Clerk to create an authentication flow and user profile page. You also learned about the importance of multisession support in your application and how easy you can implement it with Clerk. Lastly, you created an API route in Next.js and secured it with Clerk.
Using the Clerk SDK, you can expand on the example above to add social logins and multifactor authentication to your application.
Start completely free for up to 5,000 monthly active users and up to 10 monthly active orgs. No credit card required.
Learn more about our transparent per-user costs to estimate how much your company could save by implementing Clerk.
The latest news and updates from Clerk, sent to your inbox.