Twitch JWT Auth between Vue and ASP.Net core(ID Token expiry)

[bizzycola]

Greetings, I’m attempting to implement Twitch OIDC authentication with a web app, using VueJS/Typescript/oidc-client on the frontend and ASP.Net Core JWT auth on the backend. The auth takes place and works correctly, but the ID Token(JWT token) expires after a short period of time and doesn’t renew(the backend starts returning 401 after about 5-10 minutes).

I believe the issue is the silent renew in oidc-client isn’t functioning correctly. It appears to rely on iframes for the silent renewal and despite the correct URI’s being placed in my Twitch client configuration on the Twitch developer platform, I am receiving an IFrame error(Refused to display 'https://www.twitch.tv/login...' in a frame because it set 'X-Frame-Options' to 'sameorigin'.).

I was considering using Refresh Tokens, but from what I understand they only apply to Access Tokens, not ID tokens.

Is there some method in which I can either get the silent renew to function correctly, or authorize the backend API using OIDC Access Tokens/Refresh Tokens(assuming this is wise)?

For further reference, here is my oidc-client configuration(with client details removed of course):

var mgr = new Oidc.UserManager({
    userStore: new Oidc.WebStorageStateStore({store: localStorage}),
    authority: "https://id.twitch.tv/oauth2",
    client_id: "...",
    redirect_uri: url + "callback",
    response_type: "id_token token",
    scope: "openid user:read:email",
    post_logout_redirect_uri: url,
    silent_redirect_uri: url + "silent-renew.html",
    accessTokenExpiringNotificationTime: 10,
    automaticSilentRenew: true, // Tried turnin this off and using addAccessTokenExpiring event
    filterProtocolClaims: true,
    loadUserInfo: true,
    revokeAccessTokenOnSignout: true,
    monitorSession: false // Tried with/without this
});

And here is the ASP configuration:

services
    .AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddJwtBearer(options =>
    {
        options.Authority = Configuration.GetSection("Auth").GetValue<string>("Authority");
        options.TokenValidationParameters = new TokenValidationParameters
        {
            ValidateIssuer = true,
            ValidIssuer = Configuration.GetSection("Auth").GetValue<string>("Authority"),
            ValidateAudience = true,
            ValidAudience = Configuration.GetSection("Auth").GetValue<string>("Audience"),
            ValidateLifetime = true,
                        
                        
        };
    });

Thanks.

[bizzycola]

I still don’t know the resolution, but it appears the iframe is loading https://www.twitch.tv/login which is not the correct endpoint for token renewal I imagine.

In the network tab in my browser I can see it makes a request to https://id.twitch.tv/oauth2/authorize which then returns a 302(HTTP redirect response code). For some reason /authorize is redirecting me to the Twitch sign in page. However, if I load the full /authorize URI in my browser directly, it works as intended and redirects to the silent renew page.

So, when placed in an iframe, the request to /authorize appears to be redirected to /login incorrectly.

Any ideas? Thanks.

[Dist]

The JWTs from the OIDC auth flows can not be refreshed, as mentioned in the docs Using OIDC to get OAuth Access Tokens | Twitch Developers

• exp – Expiration time (note that when the JWT ID tokens expire, they cannot be refreshed)

The iframe error you’re getting is because you shouldn’t be using the login page as in iframe within your site. If you need a new JWT you need to send the user through the auth process again (which if they’re still connected to your app, will be seamless as Twitch will send them right back to your redirect along with new tokens).

[bizzycola]

Whats the general expiry time on ID tokens? They seem to be lasting about 5 minutes which seems short. I’ll have it redirect for sign-in when the API returns a 401, thanks!

[Dist]

JWT’s are intentionally short lived. Generally people use them to have easy access to the users username and such for things like rendering that in the web page they are accessing, but beyond that the access token is used for most things, maintaining user data, and making any API requests and that can easily be refreshed

[bizzycola]

So would a better idea be to find a way to get ASP.Net core to authenticate based on the Access Token rather than the ID Token? I believe they have an OpenID auth option, I just need to work out how to use it with an API(rather than their MVC stuff most of their documentation covers).

[Dist]

I don’t work with ASP.net so can’t offer any advice on what would be the best solution. The OAuth process is fairly straightforward and well documented though, as it’s just a HTTP redirects/requests, so if there’s not already libraries to handle that for you it could be something you can implement yourself.

[bizzycola]

Yea thats all good, I can deal with the ASP side of things, thanks!

I assume if I’d like to perform any API actions with the user in question, I’d need to send the access token to the backend API(my guess is I need that, no the ID token)?

[Dist]

With the Auth Code flow, after the user agrees to connect to your app they are sent to your server with a code in the querystring, your backend server will need to exchange this code to get an Access Token and Refresh Token, with the access token being used to make API requests and the refresh token to get a new set of tokens when they expire.

If you use the Implicit auth flow, this’ll return an Access Token in the url hash, which you can use in the frontend, or have your frontend pass it to your server, make API requests but this flow doesn’t include refresh tokens so the user would need to go through the auth process each time they expire.