How to Add Sign in with Vercel to Auth0

Sign in with Vercel allows users to authenticate using their existing Vercel accounts, providing a streamlined and familiar login experience. Integrating this into Auth0 involves setting up a custom connection using OAuth 2.0, which can be a bit tricky but is manageable with some patience and attention to detail. This guide will walk you through the process step-by-step.

What is Sign in with Vercel?

Sign in with Vercel is an authentication mechanism that lets users log in to your application using their Vercel credentials. This leverages Vercel’s OAuth 2.0 provider capabilities to authenticate users and obtain their profile information.

Why integrate Sign in with Vercel into Auth0?

Integrating Sign in with Vercel into Auth0 enhances your application’s authentication capabilities by offering users an additional login method. It simplifies the login process for users who already have Vercel accounts and reduces the friction associated with creating new credentials.

What is OAuth 2.0?

OAuth 2.0 is an authorization framework that enables third-party applications to access user resources without exposing credentials. It is widely used for integrating authentication and authorization across different platforms and services.

How do I set up a custom connection in Auth0?

To integrate Sign in with Vercel, you need to create a custom connection in Auth0 using OAuth 2.0. Here’s how you can do it:

Step 1: Register your application with Vercel

1. Go to the Vercel Dashboard.
2. Navigate to Settings > Applications.
3. Click on “Add New Application.”
4. Fill in the required details such as Name, Redirect URI (https://YOUR_AUTH0_DOMAIN/login/callback), and Website URL.
5. Save the application and note down the Client ID and Client Secret.

Step 2: Create a custom connection in Auth0

1. Log in to your Auth0 Dashboard.
2. Go to Connections > Social.
3. Click on “Create Connection” and select “Custom OAuth2”.
4. Configure the connection with the following settings:
   • Name: Vercel
   • Strategy: OAuth 2.0
   • Authorization URL: https://vercel.com/api/oauth/authorize
   • Token URL: https://vercel.com/api/oauth/access_token
   • Profile URL: https://api.vercel.com/v9/user
   • Scope: user
   • Client ID: The Client ID from Vercel
   • Client Secret: The Client Secret from Vercel
   • Fetch User Profile Script: Use the following script to fetch user data:

function getProfile(accessToken, context, callback) {
  request.get('https://api.vercel.com/v9/user', {
    headers: {
      Authorization: 'Bearer ' + accessToken
    }
  }, function(e, r, b) {
    if (e) return callback(e);
    if (r.statusCode !== 200) return callback(new Error('Failed to fetch user profile'));
    var profile = JSON.parse(b);
    callback(null, {
      user_id: profile.id,
      nickname: profile.username,
      email: profile.email,
      picture: profile.avatarUrl
    });
  });
}

5. Save the connection.

Step 3: Test the connection

1. Go to the “Try Connection” tab in the custom connection settings.
2. Click “Try” to test the connection.
3. If everything is configured correctly, you should be able to log in using your Vercel credentials.

Step 4: Enable the connection in your application

1. Go to Applications in the Auth0 Dashboard.
2. Select your application.
3. Go to the Connections tab.
4. Enable the Vercel connection.

Step 5: Update your application code

Update your application to use the new connection. Here’s an example using the Auth0.js library:

// Initialize Auth0
const webAuth = new auth0.WebAuth({
  domain: 'YOUR_AUTH0_DOMAIN',
  clientID: 'YOUR_CLIENT_ID',
  redirectUri: 'https://YOUR_APP_URL/callback',
  responseType: 'token id_token',
  scope: 'openid profile email'
});

// Trigger login with Vercel
function loginWithVercel() {
  webAuth.authorize({
    connection: 'vercel' // Use the connection name you configured
  });
}

// Handle authentication callback
webAuth.parseHash((err, authResult) => {
  if (err) {
    return console.error(err);
  }
  if (authResult && authResult.accessToken && authResult.idToken) {
    window.location.hash = '';
    localStorage.setItem('access_token', authResult.accessToken);
    localStorage.setItem('id_token', authResult.idToken);
    localStorage.setItem('expires_at', JSON.stringify(authResult.expiresIn * 1000 + new Date().getTime()));
  }
});

Step 6: Secure your application

Ensure that your application is secure by:

• Keeping client secrets secure and never committing them to version control.
• Validating tokens received from Auth0.
• Regularly updating dependencies and libraries.

Common issues and troubleshooting

Issue: Invalid token error

Cause: The token received from Auth0 might be invalid due to incorrect configuration or expired token.

Solution: Double-check your configuration settings in Auth0 and Vercel. Ensure that the token URL and profile URL are correct and accessible.

Issue: Authentication failed

Cause: There might be a problem with the OAuth 2.0 flow or incorrect credentials.

Solution: Verify that the Client ID and Client Secret are correct. Ensure that the redirect URI matches the one configured in Vercel.

Issue: Profile fetch fails

Cause: The profile URL might be incorrect or the server might be down.

Solution: Check the profile URL and ensure that the server is up and running. You can also try fetching the profile manually using a tool like Postman.

Security Considerations

• Client Secrets: Never expose client secrets in your client-side code. Always keep them secure on the server side.
• Token Validation: Validate tokens received from Auth0 to prevent unauthorized access.
• Regular Updates: Keep your libraries and dependencies up to date to protect against known vulnerabilities.

Comparison of Authentication Methods

Quick Reference

Conclusion

Integrating Sign in with Vercel into Auth0 provides a seamless authentication experience for users with Vercel accounts. By following the steps outlined in this guide, you can set up a custom connection in Auth0 using OAuth 2.0 and enable users to log in with their Vercel credentials. Remember to keep your client secrets secure and validate tokens to ensure a secure authentication process.

Go ahead and implement this integration in your project. Happy coding!