Page Refresh(F5) causing an error ( connect/token bad request )

[erenasigli]

Issue and Steps to Reproduce

First of all, thank you for this great library and thank you for your help in advance. Successfully installed react-oidc library to our project. Followed instructions on readme page and completed all necessary configurations.

Our problem is: After successfully logged in to the application. Everything goes normal, but when I refresh the page, an error pops out (Error authentication,An error occurred during authentication.) In the developer console, I found out that, /connect/token endpoint returns 400 bad request.

identityserverUrl/connect/token

code: undefined
grant_type: authorization_code
client_id: smartplain-local
redirect_uri: http://localhost:3000/dashboard
code_verifier: null

I am suspecting that code and code_verifier fields are null that causing the problem but unable to find out why that fields are going null. I also don't know why after refresh it request to get the token. I reckon that token is already acquired by serviceworker.

We are using IdentityServer4( with QuickStartUI) and it's client configuration as following;

new()
                {
                    ClientId = "smart",
                    ClientName = "smartUI",
                    AllowedGrantTypes = GrantTypes.CodeAndClientCredentials,
                    AllowedScopes = { "openid", "profile", "api.read","api.delete","api.upsert","smartui"},
                    ClientUri="http://localhost:3000",
                    RedirectUris={ "http://localhost:3000/dashboard" },
                    PostLogoutRedirectUris={ "http://localhost:3000/user/logout" },
                    AllowedCorsOrigins={ "http://localhost:3000" },
                    RequirePkce=true,
                    RequireClientSecret=false,
                    AllowAccessTokensViaBrowser=true,
                    AllowOfflineAccess=true,
                    AlwaysSendClientClaims = true,
                    AlwaysIncludeUserClaimsInIdToken = true
                },   

And react-oidc configuration is like;

export const configurationIdentityServer = {
    client_id: 'smartplain-local',
    redirect_uri: 'http://localhost:3000/dashboard',
    silent_redirect_uri: 'http://localhost:3000/authentication/silent-callback',
    // silent_login_uri: window.location.origin + '/authentication/silent-login',
    scope: 'openid profile api.read api.delete api.upsert',
    authority: 'https://localhost:44309',
    // authority_time_cache_wellknowurl_in_second: 60* 60,
    refresh_time_before_tokens_expiration_in_second: 40,
    service_worker_relative_url: '/OidcServiceWorker.js',
    service_worker_only: false,
    // storage: localStorage,
    // silent_login_timeout: 3333000
    // monitor_session: true,
    extras: { youhou_demo: 'youhou' },
    token_renew_mode: TokenRenewMode.access_token_invalid,
    demonstrating_proof_of_possession: false,
};

What am I doing wrong or missing. Thank you for your time and patience.

Versions

7.3.15

Screenshots

Expected

After I refresh the page, everything should go normal.

With love and all respect. Thank you.

[guillaume-chervet]

hi @erenasigli, thank you for your issue.

Are you able to reproduce the issue one the online demo ? https://black-rock-0dc6b0d03.1.azurestaticapps.net/

[erenasigli]

Hello @guillaume-chervet

First of all I am sorry for my late response and hank you for your time and interest. I couldn't reproduce the issue on the online demo. However issue got resolved, I just changed the redirect URL to some other URL(which is not exists in the app) and it worked.

Thank you.

[guillaume-chervet]

Thank you @erenasigli may you close the issue?