How to use isAuthenticated callback in OKTA_CONFIG

[niskah-energies]

I'm submitting this issue for the package(s):

• jwt-verifier
• okta-angular
• oidc-middleware
• okta-react
• okta-react-native

I'm submitting a:

• Bug report
• Feature request
• Other (Describe below)

Current behavior

Error (TypeError: undefined is not an object (evaluating 'authService.getAccessToken') )when I'm using isAuthenticated like in documentation

Expected behavior

Minimal reproduction of the problem with instructions

import {
  OKTA_CONFIG,
  OktaAuthModule
} from '@okta/okta-angular';

const oktaConfig = {
  // other config ...
  isAuthenticated: async function(authService: OktaAuthService) {
    const accessToken = await authService.getAccessToken();
    const idToken = await authService.getIdToken();
    return !!(accessToken && idToken);
  }
}

Extra information about the use case/user story you are trying to implement

My implementation:

import { OktaAuthService } from '@okta/okta-angular';

const oktaConfig = {
  issuer: 'https://xxxxxxxxxxxx.com/oauth2/default',
  redirectUri: window.location.origin + '/implicit/callback',
  clientId: 'xxxxxxxxxxxxxxxxxx',
  scopes: ['openid', 'profile', 'email', 'offline_access'],
  pkce: true,
  isAuthenticated: async function(authService: OktaAuthService) { 
    const accessToken = await authService.getAccessToken();
    const idToken = await authService.getIdToken();
    return !!(accessToken && idToken);
  }
};

No error in compilation but after page reload I have an error:

TypeError: undefined is not an object (evaluating 'authService.getAccessToken')

Environment

• Package Version: "@okta/okta-angular": "^2.0.0"
• Browser: Safari 13.1
• OS: OSX Catalina
• Node version (node -v): v10.15.1
• Other:

[swiftone]

@niskah-energies - thanks for the report. I've passed this question on to one of our Angular devs and he'll get back to one of us.

[niskah-energies]

Hi @swiftone , thank you.

[aarongranick-okta]

@niskah-energies The current version of okta-angular does not pass any parameters to the isAuthenticated function. We are working on a new release which will pass the authService as a parameter; this should resolve your issue. We expect to release this updated version this week.

In the meantime, as a workaround you could probably place an instance of the authService (from the Angular injector) into the global scope, possibly using the APP_INITIALIZER: https://www.cidean.com/blog/2019/initialize-data-before-angular-app-starts/

[niskah-energies]

Hi @aarongranick-okta, thank you for your reply. I'm not very familiar with APP_INITIALIZER, maybe I wait update release.