Application not redirecting to authorisation page

Question

I have a react application and I am using https://www.npmjs.com/package/react-oauth2-code-pkce package to redirect users to an external login / authentication site.

However, the application does not redirect to the login page automatically or make the necessary api call when first loading the application when not logged in or on their first attempt to navigate to http://localhost:3000/ instead a blank screen loads up without any content as the token at this point is not set.

I do however get this console error:

I find then if I refresh the page the redirect call occurs and takes me to my designated login page.

I've tried a couple of other packages but can't seem to get them to work. Any assistance with this would be really helpful.

I've followed the example set out by the above package and my code currently is below: The only workaround I've found that works is adding in a useEffect to check if the token doesn't already exist and reload to trigger the redirect request but this doesn't seem optimal. Other packages or suggestions that would work with the above config that do redirect correctly would be appreciated.

import "./i18n/config";
import { appTheme } from "./_Themes/theme";
import { AuthContext, AuthProvider, IAuthContext, TAuthConfig, TRefreshTokenExpiredEvent } from "react-oauth2-code-pkce";
import { Route, Routes } from "react-router-dom";
import { ThemeProvider } from "@mui/material";
import { useContext, useEffect } from "react";

function App() {
    const { token, tokenData } = useContext<IAuthContext>(AuthContext);
    const authConfig: TAuthConfig = {
        clientId: "test_client",
        authorizationEndpoint: "https://localhost:49178/connect/authorize",
        tokenEndpoint: "https://localhost:49178/connect/token",
        redirectUri: "https://localhost:3000",
        scope: "x",

        onRefreshTokenExpire: (event: TRefreshTokenExpiredEvent) => window.confirm("Session expired. Refresh page to continue using the site?") && event.login()
    };

    useEffect(() => {
        // Check if the token exists
        if (!token) {
            // Token doesn't exist, reload the window to initiate the login flow
            window.location.reload();
        }
    }, [token]);

    return (
        <AuthProvider authConfig={authConfig}>
            {token && (
                <ThemeProvider theme={appTheme}>
                    <Routes>
                        <Route path="/" element={<Dashboard />} />
                    </Routes>
                </ThemeProvider>
            )}
        </AuthProvider>
    );
}

export default App;

Answer 1

This may not fully answer your question but I always recommend a bit more control over the behaviour, to ensure best overall results:

• Controlling when redirects occur
• Storing the app location before the redirect and restoring it afterwards
• Dealing with error and expiry conditions in OAuth responses in your preferred way

OAuth for SPAs involves redirecting at some point, when there is no token yet. This involves forming an authorization request URL and updating location.href.

The app reloads when the authorization response is received, which is then processed to receive tokens. This code can run in your useEffect hook.

EXAMPLE

An example of mine uses a library with 2 operations that make these events explicit and give you choices on when to call them:

• signinRedirect
• signinRedirectCallback

You can run the app yourself as something to compare against, then translate it to your preferred coding style:

• Code
• Doc

This may be a little more work but may give you better end results. Also, if you update my config with your values that should provide a working login.