AADSTS700084: The refresh token was issued to a single page app (SPA) - invalid_grant error in Safari

[sametcelikbicak]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

3.0.2

Wrapper Library

MSAL Angular (@azure/msal-angular)

Wrapper Library Version

3.0.2

Public or Confidential Client?

Public

Description

After logging in to the application, if 24 hours or more have passed without any transactions, at the first action MSAL make a token request and its return 400 Bad Request with invalid_grant error. If that action was made via Chrome MSAL making new token request and application continue the work if that action was made via Safari MSAL did not make any another token request and application is stay with invalid state.

Request URL: URL: https://login.microsoftonline.com/<tenant-id>/oauth2/v2.0/token

Response: 👇

{
    "error": "invalid_grant",
    "error_description": "AADSTS700084: The refresh token was issued to a single page app (SPA), and therefore has a fixed, limited lifetime of 1.00:00:00, which cannot be extended. It is now expired and a new sign in request must be sent by the SPA to the sign in page. The token was issued on 2023-12-11T12:31:44.1947275Z. Trace ID: 3464627b-53b7-4eeb-8111-3a1b1c759a00 Correlation ID: c28f6a3f-b0f7-493b-a965-2b08925e09b3 Timestamp: 2023-12-12 13:10:49Z",
    "error_codes": [
        700084
    ],
    "timestamp": "2023-12-12 13:10:49Z",
    "trace_id": "3464627b-53b7-4eeb-8111-3a1b1c759a00",
    "correlation_id": "c28f6a3f-b0f7-493b-a965-2b08925e09b3",
    "error_uri": "https://login.microsoftonline.com/error?code=700084",
    "suberror": "bad_token"
}

I'm using MsalInterceptor and MsalGuard from @azure/msal-angular library.

MSAL Configuration

platformBrowserDynamic([
    {
        provide: MSAL_INSTANCE,
        useValue: new PublicClientApplication({
            auth: {
                clientId: identity.clientId,
                authority: identity.instanceUri + identity.tenantId,
                redirectUri: redirectUrl,
                postLogoutRedirectUri: redirectUrl,
            },
            cache: {
                cacheLocation: BrowserCacheLocation.LocalStorage,
                storeAuthStateInCookie: isIE, // set to true for IE 11
            },
        }),
    },
    {
        provide: MSAL_GUARD_CONFIG,
        useValue: { interactionType: InteractionType.Redirect },
    },
    {
        provide: MSAL_INTERCEPTOR_CONFIG,
        useValue: {
            interactionType: InteractionType.Redirect,
            protectedResourceMap,
        },
    },
])

Relevant Code Snippets

[AppModule] 👇

@NgModule({
    declarations: [
        AppComponent,
        ForbiddenComponent,
        UnauthorizedComponent,
        ContainerComponent,
        LoginComponent,
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        HttpClientModule,
        MsalModule,
        ...
    ],
    providers: [
        {
            provide: HTTP_INTERCEPTORS,
            useClass: MsalInterceptor,
            multi: true,
        },
        MsalGuard,
        MsalService,
        MsalBroadcastService,
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    bootstrap: [AppComponent, MsalRedirectComponent],
})
export class AppModule {}

[AppRoutingModule] 👇

export const appRoutes: Routes = [
    { component: ForbiddenComponent, path: "forbidden" },
    { component: UnauthorizedComponent, path: "unauthorized" },
    { component: LoginComponent, path: "login" },
    {
        canActivate: [CanActivateGuard, MsalGuard],
        path: "foo",
        loadChildren: () =>
            import("./components/foo/foo.module").then(
                (m) => m.FooModule,
            ),
    },
    {
        canActivate: [CanActivateGuard, MsalGuard],
        path: "bar",
        loadChildren: () =>
            import("./components/bar/bar.module").then(
                (m) => m.BarModule,
            ),
    },
    {
        canActivate: [CanActivateGuard],
        component: ContainerComponent,
        path: "",
    },
    { path: "**", pathMatch: "full", redirectTo: "" },
];

const isIframe = window !== window.parent && !window.opener;

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes, {
            initialNavigation: !isIframe ? "enabledBlocking" : "disabled",
        }),
    ],
    exports: [RouterModule],
})
export class AppRoutingModule {}

Identity Provider

Azure AD / MSA

Source

External (Customer)

[tnorling]

Refresh tokens have a 24 hour lifetime. Once expired MSAL will attempt to silently acquire a a new auth code and then redeem for a fresh set of access, id and refresh tokens. This fallback fails in Safari as it depends on 3P cookies which are blocked by default. 3P cookies are not blocked by default in Chrome, yet, which is why it may succeed there.

Given that silent calls are not ever guaranteed you should always have a backup plan, e.g. invoke acquireTokenRedirect or acquireTokenPopup in the event the silent call fails.

[brahmaiahthota]

@sametcelikbicak How did you resolve this issue ? could you please let me know I am also facing the same issue..

[sametcelikbicak]

@brahmaiahthota I wrote a custom interceptor base on msal interceptor(https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/src/msal.interceptor.ts). just change exception handling part for below call with calling this.acquireTokenInteractively(authRequest, scopes); method.

 return this.authService
      .acquireTokenSilent({ ...authRequest, scopes, account })