How can i access authservice outside the react component.

[vejandla]

Is there a way to access authservice outside the react component. All I see from the package is a HOC and hook, Appreciate any help

[shuowu]

@vejandla The authService instance is only be initialized in the top-level Security Provider. If you are using okta-react SDK, HOC or hook should be the recommended ways to consume the authService instance, since you only want to keep one instance in your app's lifecycle.

But you can opt-out from okta-react by just using the lower level SDK okta-auth-js. Then you can have the flexibility to manage the authService instance by yourself. Please see auth js usage guide for more information.

[sleepwalky]

I have the following js module:

import { AuthService } from '@okta/okta-react'
import { registry } from 'routes/registry'
import { config } from 'config'

const CLIENT_ID = config.OKTA_CLIENT_ID || ''
const ISSUER = config.OKTA_ISSUER || ''

export const oktaConfig = {
  clientId: CLIENT_ID,
  issuer: ISSUER,
  redirectUri: `${window.location.origin}${registry.loginCallback}`,
  scopes: ['openid', 'profile', 'email'],
  pkce: true,
  disableHttpsCheck: false,
}

export const Auth = new AuthService(oktaConfig)

As far as I know es modules are singletons by default. @shuowu is this solution okay?

[vejandla]

@shuowu and @sleepwalky Thanks for the suggestions.

To answer @shuowu yes, I'm using @okta/react and its Security component. When a request goes out/response comes in, at the interceptor level, I would like to access auth service and pass in Acces_token and signout if I get 401 response.

I see that security is accepting auth service as a prop, I guess this will solve my problem.

What happens if I call logout() func in AuthService once after access token gets expired? Does it still treat that as a valid logout request?

[shuowu]

@sleepwalky Yes, it definitely works. AuthService is the wrapper on top of okta-auth-js to expose methods from auth-js. But the AuthService is designed to serve Components from okta-react SDK, if you decide to not use Components from okta-react, I would suggest just go with okta-auth-js, which will give you more flexibility on managing the auth flow.

[shuowu]

@vejandla logout should be able to clear your session and also tokens on the client-side as long as the idToken is still valid.

Also, the underlying auth-js instance will auto-renew the accessToken by default, and trigger onSessionExpired callback when access. You can try to override the onSessionExpired callback to logout the user out. There is another thread that talks about similar issue, you can also take a look. https://github.com/okta/okta-signin-widget/issues/952#issuecomment-653876949

[vejandla]

Thanks for the info @shuowu

I'm reading about the auto-renew, but could n't understand the documentation correctly.

If a user logs in and don't interact with the system at all, will it still auto-renew ? If not, What exactly will be the conditions to decide whether to auto-renew or not?

[shuowu]

@vejandla auto-renew is the default behaviour from auth-js tokenManager. Basically, each token has a time to live, auth-js maintains a timer to get a new valid token when the previous token is about to expire (when autoRenew is turned on).

But, there is an issue in okta-react side that may keep staled tokens in memory, our team is working on a solution now.

[swiftone]

@vejandla - authState contains the accessToken within it, you should be able to pass that value to code that is otherwise outside of the react UI. Just note that any changes (new token, expiration, etc) will trigger from the authState object.

[vejandla]

@swiftone @shuowu Looks like Security component can take individual props and instantiates the authservice inside its constructor or it can also take authService as prop and use that directly.

so if anyone want to have access to authservice outside react context, they can certainly instantiate and pass the instance to security component and as well they can use the same instance in js class also.

[daltonfury42]

This same issue is there even if you use other providers like Auth0. Here is my approach to solving this.

https://github.com/SimplQ/simplQ-frontend/pull/483