How to verify and renew a JWT id_token during my SPA load?

Question

I'm pretty new to OAuth 2.0 and OpenID Connect and I have trouble understanding some parts of the flow (or what best practices should I use)...

Sorry for the lengthy post :)

My Setup:

1. An OP (OpenID Provider) that is basically an express server that uses oauth2orize-openid and passport to authenticate and authorize users. Let's call it http://authserver.com

2. A Single page application (react+webpack) that needs to authenticate users against my OP, Let's call it http://my-spa.com

Since it's an SPA (statically served by webpack) I have to use Implicit Flow.

My Questions

Once the user navigates to http://my-spa.com, the application is loaded, then it checks against the localStorage whether an id_token exists.

no id_token in localStorage on load :

1. Since there's no token, I redirect to http://authserver.com/dialog/authorize
   • response_type=id_token
   • scope=openid profile
2. Once the user successfully authenticated and authorized, authserver redirects back to my-spa with the id_token in the URI Fragment
3. I store the id_token in the localStorage and the user can start using the app.

there's an id_token in localStorage on load

The user closed the browser and opened it again. This is where I'm having a trouble to understand what to do. Since there's already a token (from previous login), I need to check if it's valid.

What are the best practices to do so? Here's what I'm thinking would be correct:

1. Redirecting to http://authserver.com/dialog/authorize using :
   • prompt=none
   • id_token_hint=CURRENT_TOKEN
2. once OP receives this request, it should verify JWT signature, try to auto-approve the user and redirect back with a new JWT.

token get's expired after some time

Let's say a logged-in user has it's JWT expired, when should it ask for a new one? What should trigger the renewal?

what are the /tokeninfo or /userinfo for?

From my understanding, JWT stores all the data required to identify a user. However I've seen examples calling /tokeninfo or /userinfo.

If I already have the sub id, are these endpoints just for verifying the token (assuming I need nothing but the subject's id)?

JWT signature verification

Beside the OP, should my-spa verify the JWT signature (with a public key perhaps)?

re-using this token to access a REST API of a third service

If I have another web service api, call it http://my-service.com/api which needs to know which user invoked it from my SPA, these are the steps I believe I need to perform:

1. Add the id_token as a Bearer token to each ajax request
2. my-service.com should validate the JWT signature (with a public key?) and decide whether to allow or deny access to the protected resource

Any help will be appreciated!

Answer 1

Your question is big, I will try to answer all the phrases marked with ? in a generic way (without taking into account the specific frameworks you are using)

there's an id_token in localStorage on load.

The user closed the browser and opened it again. What are the best practices to do so?

You can choose between being optimistic and continue using the token, or pessimistic and request a new one.

• Continue using the token if the expiration time is long enough. I assume that the token is verified in each request, so if the token is invalid you will receive a 401 and you can request a new one

• Request a new token if the expiration is short or you want to require a new user authentication when the browser opens your application. If you want to check if the JWT is still valid, redirections with an auth server is not user-friendly for a SPA. I suggest to perform an AJAX call to validate and request a new token.

token get's expired after some time

This is the first case I explained above. You can prevent it issuing a new token on each request, or after fixed periods of time i.e. 1 hour

what are the /tokeninfo or /userinfo for?

I do not know these services, but their meaning can be deduced. JWT is signed, so you can trust the data contained (While the signature remains valid)

JWT signature verification, Beside the OP, should my-spa verify the JWT signature (with a public key perhaps)?

You must verify the signature for each request. If you use a symmetric key (i.e HMAC) JWT is signed and verified with the same key. With asymmetric keys (RSA), JWT is signed with private key and verified with the public key

re-using this token to access a REST API of a third service

Add the id_token as a Bearer token to each ajax request,

Correct, usually using an Authorization header

my-service.com should validate the JWT signature (with a public key?) and decide whether to allow or deny access to the protected resource

Of course, any service using the JWT must validate the signature. A external services does not own the private key, so in this case is required to use a assymetric key. You need to publish the public key so the external service could verify the token