Universal login - access and refresh token

[walter.adbe]

Hi,

Recently in our project we had a requirement where we had to implement authentication using auth0. I proceeded with using resource owner password flow and i was able to develop an application with gateway to exchange access token with refresh token. Everything was working well.

Question:
In the new requirement we need to implement SSO so that third part application can use our credentials. We have successfully implemented universal login in our application. My question was how do we use the token.

Our application uses a gateway and its running on a different domain than our front-end,.
The front-end client calls login (Universal login) and in return I am getting two tokens (1 from auth0.com and another is the domain name of the application is auth0) and in the authorisation header I am getting a Bearer token.

Here is the part i am getting confused. I wanted to use cookies in the application but the cookies i see are in a different domain than the gateway. In the doc it mentions that we need to use custom domain in Auth0 but i cant test that in localhost since custom domain needs a https domain.

Alternatively I can build cookies in the backend by reading the authorisation header from the request in the gateway. But I think that is not the correct way to implement SSO especially when i need the user to use a third party application without logging in again to the third party app.

Any information which can point me in the correct direction is much appreciated.

[rueben.tiow]

Hi @walter.adbe,

@walter.adbe

My question was how do we use the token.

Have you gotten a chance to take a look at the documentation below on using refresh tokens?
https://auth0.com/docs/secure/tokens/refresh-tokens/use-refresh-tokens

Thanks,
Rueben

[walter.adbe]

Hi Ruben,

I have already seen this document to get new access token using existing refresh token and have implemented it using resource owner password flow. In resource owner password flow login happens in the back-end and i can build cookies (Cookies have refresh and access token) and send it to the front-end but in universal new login authentication is done on the front-end ( auth0 loginwithRedirect) therefore cookies are not build.

Let me explain what i did till now.

1. I have a frontend in angular, multiple gateways in graphql (each gateway an application end-point) and services running on graphql. All the three parts are running in different servers. Only the gateways and the frontend are directly exposed to the outside world.

2. Multiple gateways and frontend are running on its own domain.

3. I have implemented Universal new login in Angular front-end.

4. After successful login auth0 would return cookies (1. auth0.com and other is the auth0 application domain eg: dev-somename.us.auth0.com), and the authorisation header has the bearer token.

5. Since front-end and gateways are in different domain, front-end cannot send the cookie to the gateways. [I added the gateway IP to Allowed Origins in application settings]

6. Gateway do not get the cookies but can get authorisation header [using authHttpInceptor in angular] where i can get the bearer token.

Example:
I am trying to create an application similar to bitbucket (in design).
We can log into bitbucket and move to different app like JIRA, confluence etc even-though they are in different domain. Bitbucket also uses SSO

Question:

1. Can I build the cookie on the backend using the authorisation header ?
2. I would like my application to use cookies since its more secure and front-end cannot access it.
3. If the above case is true i can also put refresh token inside the cookie. Is that a good practice because the examples in auth0 does not mention anything about using cookies.

[walter.adbe]

Hi,

I think from reading The Complete Guide to Angular User Authentication with Auth0 i believe access token comes via authorization header and not cookies.

[rueben.tiow]

Hi @walter.adbe,

Thank you for your responses.

Yes, that is correct. The Access Token is attached to the Authorization Header and not in Cookies.

Please let us know if you have any additional questions.

Thanks,
Rueben

[walter.adbe]

Hi Ruben,

Access token is fixed now i having an issue of not getting a refresh token.

I steps i followed:

1. Created a single page application.
2. Added [http://127.0.0.1:9201 frontend domain] for Allowed Callback URL’s, Allowed Logout URL’s, Allowed Web Origins and Allowed Origins
3. Since my backend[http://127.0.0.1:2000 ] is running on a different domain i have added that to Allowed Web Origins and Allowed Origins. I do not know whether its required or not but to be on safe side i added it.
4. Enabled Rotation and set Reuse Interval as 1800 sec.

Creation of a new API

1. Created a new API
2. Set Token expiration to 3600 and Token Expiration for Browser rows 1800. [I observed that since front-end and backend are using the same audience setting the token expiration time in API reflects it in the front-end].
3. Enable Allow Offline Access.

Configuring Augular

1. app.module.ts
   

AuthModule.forRoot({
      useRefreshTokens: true,
      domain: '',
      clientId: '',
      authorizationParams: {
        audience: 'same as the backend',
        scope: 'offline_access',
        redirect_uri: window.location.origin,
      },
      errorPath: '',
      httpInterceptor: environment.httpInterceptor,
    }),

2. When i look at the backend i am not receiving any refresh token and i was able to confirm it by refreshing the page a error message is displayed mentioning refresh token not available.

I believe it is something to do with the configuration. Appreciate your help

[rueben.tiow]

Hi @walter.adbe,

Thanks for the reply.

Did you make sure to include the offline_access scope in your login request?

It should look something like:

https://{yourDomain}/authorize?
    response_type=code&
    client_id={yourClientId}&
    redirect_uri={https://yourApp/callback}&
    scope=offline_access&
    audience={apiAudience}&
    state={state}

Reference:

Get Refresh Tokens

Thanks,
Rueben

[walter.adbe]

Hi Ruben,

I am not using yourDomain}/authorize endpoint.
In Angular i am using Auth0SDK. auth0/auth0-angular which i believe implicitly calls yourDomain}/authorize endpoint

I was following below example
https://auth0.com/docs/libraries/auth0-single-page-app-sdk

The example was for calling an API in my case i am calling a graphql endpoint. Therefore its slightly different.

As you mentioned in your previous reply i did add scope as offline_access. I used loginWithRedirect() in angular.

AuthModule.forRoot({
      useRefreshTokens: true,
      domain: '',
      clientId: '',
      authorizationParams: {
        audience: 'same as the backend',
        scope: 'offline_access',
        redirect_uri: window.location.origin,
      },
      errorPath: '',
      httpInterceptor: environment.httpInterceptor,
    }),

[walter.adbe]

Hi Ruben,

A blog getTokenSilently / useRefreshTokens / getIdTokenClaims - how to use it correctly? - #3 by stephanie.chamblee in auth0 community mentions that refresh token will be handled by Auth0 SDK and i would not be seeing the refresh token in the request send to the backend.

Anyways thank you for your help. I appreciate it.