How to Integrate Multiple OAuth Providers in SvelteKitAuth

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.