Getting started with Sign in with Vercel

This guide uses Next.js App Router. You'll create a Sign in with Vercel button that redirects to the authorization endpoint, add a callback route to exchange the authorization code for tokens, and set authentication cookies.

• A Vercel account
• A project deployed to Vercel
• An App created from the dashboard
• A client secret generated from the dashboard
• An authorization callback URL configured from the dashboard
  • This should be configured to be
    • for running the application locally
    • for running the application in production
• The necessary permissions configured from the dashboard

1. Add environment variables

   Add the following variables to your at your project's root:

   When you are ready to go to production, add your environment variables to your project from the dashboard. If you have Vercel CLI installed, you can run to pull the values from your project settings into your local file.

2. Create your folder structure for the API routes

   Create a folder structure for the API routes in your project. Each API route will be in a folder with the name of the route.

   • : This route will be used to redirect the user to the authorization endpoint.
   • : This route will be used to exchange the for tokens.
   • : This route will be used to sign the user out.
   • : This route is optional and will be used to validate the access token.

3. Create an API route

   Use the route to redirect the user to the authorization endpoint.

   • Generate a secure random string for the , , and .
   • Create a cookie for the , , and .
   • Redirect the user to the authorization endpoint with the required parameters.

4. Create a API route

   Use the route to exchange the authorization code for tokens.

   • Validate the and .
   • Exchange the for tokens using the stored .
   • Set the authentication cookies.
   • Clear the temporary cookies (, , and ).
   • Redirect the user to the profile page.

5. Create a profile page

   Create a profile page to display the user's information.

6. Create an error page

   Create an error page to display when an error occurs.

7. Create a API route

   Use the route to revoke the token and sign the user out.

   • Revoke the access token.
   • Clear the and cookies.
   • Return a JSON response.

8. Add Sign in and Sign out buttons

   Add two components to start the OAuth flow (and sign in) and to sign out:

9. Run your application

   Run your application locally using the following command:

   Open http://localhost:3000 and Sign in with Vercel. You will be redirected to the consent page where you can review the permissions and click Allow. Once you have signed in, you will be redirected to the profile page.

10. Create a token introspection API route (Optional)

    The API route can be used to validate the access token. This is optional, but it can be useful to validate the access token.

11. Create a token introspection component (Optional)

    The component can be used to validate the access token. This is optional, but it can be useful to validate the access token.

    Add this component to your profile page.