How to Integrate Multiple OAuth Providers in SvelteKitAuth

Chapter 5 of Comprehensive Guide to SvelteKitAuth: Secure Authentication for SvelteKit Apps

In previous articles, we explored how to integrate both built-in and custom providers in SvelteKit. In this section, we'll demonstrate how to configure multiple providers simultaneously.

Let's first discuss the scenarios where such a configuration is beneficial. For instance, offering multiple sign-in options like Google, GitHub, or LinkedIn can enhance user convenience and flexibility.

Here’s how to achieve this:

// hooks.server.ts

import type { Handle } from '@sveltejs/kit';
import Auth0Provider from "@auth/core/providers/auth0";
import { SvelteKitAuth, type SvelteKitAuthConfig } from '@auth/sveltekit';
import { VERCEL_SECRET, CLIENT_ID, CLIENT_SECRET, ISSUER, WELL_KNOWN } from '$env/static/private';

const { handle: getAuthConfig } = SvelteKitAuth(async (event) => {
  const config: SvelteKitAuthConfig = {
    providers: [{
      Auth0Provider({
        id: 'auth0',
        name: 'built-in-oauth-provider',
        clientId: CLIENT_ID,
        clientSecret: CLIENT_SECRET,
        issuer: ISSUER
      }),
      id: 'auth1',
      name: 'custom-oauth-provider',
      type: 'oidc',
      client: {
        token_endpoint_auth_method: 'client_secret_post'
      },
      clientId: CLIENT_ID,
      clientSecret: CLIENT_SECRET,
      issuer: ISSUER,
      wellKnown: WELL_KNOWN,
      checks: ['pkce'],
      authorization: {
        url: `${ISSUER}authorize`, // 'http://localhost:4200/authorize
        params: {
          scope: 'openid name email profile',
          redirect_uri: `${event.url.origin}/auth/callback/auth1`
        }
      },
      token: `${ISSUER}oauth/token`,
      userinfo: `${ISSUER}userinfo`
    }],
    secret: VERCEL_SECRET,
    debug: true,
    trustHost: true,
    session: {
      strategy: 'jwt',
      maxAge: 1800 // 30 mins
    },
    logger: {
      error: async (error: any) => {
        console.log('Error trace from SvelteKitAuth:', error);
      }
    }
  };
  return config;
});

export const handle = SvelteKitAuth(config) satisfies Handle;

The main differentiating factor is the id property. The id property uniquely identifies which provider should be used for authentication. The name property acts as a label or a detailed description that helps us differentiate the providers from each other.

We can switch the providers based on the id example:

<button on:click={() => signIn('auth0')} >
  <span>Sign In with Built-in Auth0 Provider</span>
</button>

<button on:click={() => signIn('auth1')} >
  <span>Sign In with Custom Auth0 Provider</span>
</button>

In conclusion, integrating multiple OAuth providers in SvelteKitAuth significantly enhances user experience by offering diverse sign-in options. This flexibility not only improves user convenience but also broadens the potential user base by accommodating various preferences. By following the outlined steps, developers can seamlessly configure multiple providers, ensuring a smooth and secure authentication process.

Here is the link to the GitHub repository with the codebase. In the next article, we will learn how to enhance custom typings with SvelteKitAuth.

Did you find this article valuable?

Support Aakash Goplani by becoming a sponsor. Any amount is appreciated!