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

No repository file or test is named. Start at supabase.auth.signInWithIdToken() and trace the Azure nonce validation, then reproduce the flow from the supplied JavaScript example with an Azure token containing a nonce. Done means the cause of the mismatch is identified and the valid sign-in behavior is verified.

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)
}