Is it possible to have a single Login Flow with Firebase and MSAL Using Microsoft Credentials for Graph API Access?

Question

Is there a way to synchronise or bridge the authentication from Firebase to MSAL so that MSAL uses the same credentials to acquire Access Tokens?

I am in the process of building out a Next.js 14 app where I'd like users to be able to log in only using their Microsoft credentials via Firebase Authentication. Post login, I would need to use Microsoft's Authentication Library (MSAL) to generated the accessToken to use the Microsoft Graph API, but I want to avoid having users log in again for the MSAL part.

The challenge I'm facing is designing a single login flow that authenticates users via Firebase with Microsoft credentials and then seamlessly uses those credentials to authenticate with MSAL. Here's the conceptual workflow:

• Initial Login: Users log in through Firebase using their Microsoft
  account. Firebase handles the authentication, and the user's
  Microsoft account is linked with Firebase.
• MSAL Integration: After the user is authenticated with Firebase, I need to use MSAL for accessing the Microsoft Graph API. The ideal scenario is that the authentication with Firebase somehow facilitates or aligns with authenticating MSAL without requiring the user to perform another login action.

---

What I have tried so far : I originally built a system (That Didn't use MSAL) that receives the accessToken and refreshToken provided during the Firebase Microsoft OAuth login, I then tried to renew the tokens manually using this endpoint request :

export async function POST(request) {
  const cookieStore = cookies();
  const { refreshToken } = await request.json();

  try {
    const clientId = process.env.MICROSOFT_CLIENT_ID;
    const clientSecret = process.env.MICROSOFT_CLIENT_SECRET;

    console.log('Microsoft Client ID:', clientId);
    console.log('Microsoft Client Secret:', clientSecret);

    const response = await fetch('https://login.microsoftonline.com/common/oauth2/v2.0/token', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: new URLSearchParams({
        client_id: clientId,
        client_secret: clientSecret,
        grant_type: 'refresh_token',
        refresh_token: refreshToken,
        scope: 'https://graph.microsoft.com/.default',
      }),
    });

For context I have a fully set up App registration with EntraID and have set all required permissions.

I kept getting this response :

Token refresh failed. Response: {

error: 'invalid_grant',

error_description: 'AADSTS9002313: Invalid request. Request is malformed or invalid. Trace ID: c1c66293-f79f-4b6f-95fd-d926a6446100 Correlation ID: e86878d8-6022-4ec1-be7a-f1406c04353e Timestamp: 2024-03-07 07:05:45Z',

error_codes: [ 9002313 ],

timestamp: '2024-03-07 07:05:45Z',

trace_id: 'c1c66293-f79f-4b6f-95fd-d926a6446100',

correlation_id: 'e86878d8-6022-4ec1-be7a-f1406c04353e',

error_uri: 'https://login.microsoftonline.com/error?code=9002313'

}

---

Any advice, suggested approaches, or references to similar implementations would be greatly appreciated.

Thanks!