I have an Angular (19) Application which uses the angular-oauth2-oidc (v19) package. I do initialize the OIDC code flow in the provideAppInitializer function. This application is called from inside an iOS native app (on iOS 26), which opens an in app browser (not really sure, which kind of, but could be of type SFSafariViewController). The in app browser is opened and navigates to my angular application which navigates to the login page of my IAM. After successfully entering the correct credentials an error is thrown resulting in a white screen for the user. When reloading the site manually, everything works fine and the user is successfully logged in.
Error from debug console:
Validating access_token failed, wrong state/nonce. **- null - "app"** oidc-Error: {"type":"invalid_nonce_in_state","reason":null,"params":null}
The comparison tries to compare null to “app” which are no real nonces. “app” is initially (when calling the in app browser) given in the state-url parameter: state=app. This values should not be compared to anything. Which leads me to the assumption, that the method is called at the wrong time (race condition).
The implementation works fine on desktop browser including Safari, Edge, Firefox…
Initializing of oidc in my main.ts.
const oidcInitializer = async () => {
const oauthService = inject(OAuthService);
oauthService.configure(authConfig);
await oauthService.loadDiscoveryDocumentAndTryLogin().then(() => {
if (!oauthService.hasValidAccessToken()) {
oauthService.initLoginFlow();
}
}).catch(() => {
return Promise.resolve();
});
};
bootstrapApplication(AppComponent, {
providers: [
importProvidersFrom(BrowserModule, ReactiveFormsModule),
{
provide: ErrorHandler,
useClass: GlobalErrorHandler,
},
provideHttpClient(),
provideOAuthClient(),
provideAppInitializer(oidcInitializer),
provideRouter([
{
path: '',
component: MainComponent,
canActivate: [AuthGuard],
resolve: {state: StateResolver}
},
.
.
.
my auth.config.ts:
export const authConfig: AuthConfig = {
issuer: environment.issuer,
redirectUri: window.location.origin,
logoutUrl: '
postLogoutRedirectUri: window.location.origin,
clientId: environment.clientId,
responseType: 'code',
scope: environment.scope,
showDebugInformation: false,
oidc: true,
strictDiscoveryDocumentValidation: false,
};
When the nonce verification is turned of via { disableNonceCheck: true } everything works as expected.
What is the reason for the error, or why is validateNonce calles with the wrong values on in app browser on iOS and not on desktop?
How can this be fixed or implemented differently to work as expected?