I get Nonces mismatch error for Azure provider when using supabase.auth.signInWithIdToken()

[mike-rambil]

Error Name

Nonces mismatch

Code

import TokenAndAssertionFetch from '@/components/AzureAuth/TokenAndAssertionFetch';
import { createClient } from '@/utils/supabase/client';
import { useEffect, useState } from 'react';

function decodeJWT(token) {
  try {
    const base64Url = token.split('.')[1];
    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    const jsonPayload = decodeURIComponent(
      atob(base64)
        .split('')
        .map((c) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
        .join('')
    );
    return JSON.parse(jsonPayload);
  } catch (error) {
    console.error('Error decoding JWT:', error);
    return null;
  }
}

export default function Page() {
  const [user, setUser] = useState(null);
  const [errors, setErrors] = useState(null);
  const supabase = createClient();
  const { assertion: token } = TokenAndAssertionFetch();

  useEffect(() => {
    const signIn = async () => {
      if (token) {
        try {
          // Decode token to check if nonce exists
          const decodedToken = decodeJWT(token);
          console.log('Decoded token:', decodedToken);

          // Prepare sign in options
          const signInOptions = {
            provider: 'azure',
            token,
          };

          // Only add nonce if it exists in the token
          if (decodedToken?.nonce) {
            signInOptions.nonce = decodedToken.nonce;
          }

          const { data, error } = await supabase.auth.signInWithIdToken(
            signInOptions
          );

          if (error) {
            setErrors(error.message);
            console.error('Sign in error:', error);
          } else {
            setUser(data.user);
          }
        } catch (err) {
          setErrors(err.message);
          console.error('Unexpected error:', err);
        }
      }
    };

    signIn();
  }, [token]);

  return (
    <div className='p-4'>
      {errors && (
        <div
          className='bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4'
          role='alert'
        >
          <strong className='font-bold'>Error:</strong>
          <span className='block sm:inline'> {errors}</span>
        </div>
      )}
      {user ? (
        <div
          className='bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded'
          role='status'
        >
          <strong className='font-bold'>Success!</strong>
          <span className='block sm:inline'>
            {' '}
            User authenticated: {user.email}
          </span>
        </div>
      ) : (
        <div
          className='bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded'
          role='status'
        >
          <span className='block sm:inline'>Authenticating...</span>
        </div>
      )}
    </div>
  );
}

UI

things to know

when decoding the token coming from azure using the jwt decoder, the token has the nonce passed in.

 ........
  "name": "Micheal Palliparambil",
  "nonce": "<<redacted>>",
  ........
  ........
  ........
  ........
  ........
  ........
  (all other entries redacted since its irrelevant)
}

[brown62]

I'm having the same issue. The nonce I'm using to request the id_token is the same shown in my decoded id_token

  const baseUrl = "https://login.microsoftonline.com/common/oauth2/v2.0/authorize"
  const params = new URLSearchParams()
  params.set("client_id", CLIENT_ID)
  params.set("redirect_uri", REDIRECT_URI)
  params.set("response_type", "id_token")
  ....
  params.set("nonce", <myNonce>)

{
  ver: '',
  iss: '',
  sub: '',
  aud: '',
  .....
  nonce: <myNonce>,
}

but when I pass it to supabase

const {data, error} =await supabase.auth.signInWithIdToken({
    token: id_token,
    provider: "azure",
    nonce: <myNonce>
  })

I get this error

AuthApiError: Nonces mismatch

---

An Alternative

Use the code response type instead of id_token as mentioned here

You may need to change the settings in your Azure application to include ID Tokens. I would get an id_token from most accounts using the openid scope but not always. I've just checked these boxes and am hoping it solves that inconsistency problem.

(the settings in azure are for hybrid or implicit flows only and still requires a nonce)

I have found that the auth code flow inconsistently returns an ID Token. YMMV

[mike-rambil]

@brown62 are you suggesting that using "code" instead would help? Either way thanks for the info :)