Retrieving Auth0 credentials from Azure Key Vault in Next.js 14

[visconde]

Hello Auth0 community,

I’m working on a Next.js 14 application and I’m trying to improve the security of my Auth0 integration. My goal is to retrieve the client_id and client_secret from Azure Key Vault instead of storing them in a local .env file.

I’m using the Auth0 SDK for Next.js and have set up a custom handleAuth route. Initially, I thought I could simply fetch the credentials from Azure Key Vault and pass them directly to the handleLogin function like this:

export const GET = handleAuth({
  login: handleLogin({
    authorizationParams: {
      scope: 'openid profile email',
      redirect_uri: redirectUri,
      client_id: 'fetched_client_id_from_azure_key_vault',
    },
    returnTo: '/equipment',
  }),
  // ... other handlers
});

However, I’ve encountered two issues:

1. Despite the TypeScript intellisense suggesting that client_id is a valid property for authorizationParams, when I add it, I still get a console error: “Uncaught Error: “clientID” is required”.
2. The official Auth0 documentation doesn’t list client_id as a property of AuthorizationParams.

This leads me to two questions:

1. Is the Next.js Auth0 SDK’s TypeScript definition potentially misleading by suggesting client_id as a valid property?
2. What’s the correct way to provide the client_id (and potentially client_secret) to the Auth0 SDK when they’re fetched from an external source like Azure Key Vault, rather than being stored in environment variables?

I’d greatly appreciate any insights or best practices for securely integrating Auth0 with Azure Key Vault in a Next.js 14 application. Thank you in advance for your help!

[teodor.andrei]

Hi @visconde, and welcome back to the Auth0 Community!

To answer your first question, the AuthorizationParams interface does not contain a client_id property.

export interface AuthorizationParameters {
  /**
   * The scope of the access request, expressed as a list of space-delimited, case-sensitive strings.
   * Defaults to `"openid profile email offline_access"`.
   */
  scope?: string | null;
  /**
   * The unique identifier of the target API you want to access.
   */
  audience?: string | null;
  /**
   * The URL to which the authorization server will redirect the user after granting authorization.
   */
  redirect_uri?: string | null;
  /**
   * The maximum amount of time, in seconds, after which a user must reauthenticate.
   */
  max_age?: number;
  /**
   * Additional authorization parameters.
   */
  [key: string]: unknown;
}

When working with the NextJS SDK, the clientId and clientSecret properties need to be part of the object you pass to the handleAuth function (if not present in the .env file using the key AUTH0_CLIENT_ID). Also, notice that they are in camelCase as part of the SDK. See docs for more information.

export const GET = handleAuth({
  login: handleLogin({
    authorizationParams: {
      scope: 'openid profile email',
      redirect_uri: redirectUri,
    },
    returnTo: '/equipment',
  }),
  // ... other handlers
  clientId: clientId,
  clientSecret: clientSecret,
});

Before adding them here, make sure you fetch them from the Azure Key Vault properly using the Azure Key Vault secret client library for JavaScript .

The simplest way to check if you fetched them correctly is to add logs before using them in your handleAuth function:

console.log(“clientId:”, clientId);
console.log(“clientSecret:”, clientSecret);

If you have any more questions, don’t hesitate to come back!