Oidc redirect to signin-callback.html

Question

Oidc redirect to signin-callback.html

5.5k Views Asked by JoelE At 28 February 2022 at 08:52

I'm stuck on this for the past few days. I'm having an issue authenticating with Oidc, I'm trying to redirect to a signin-callback.html after authentication but I'm unable to call an HTML page directly from my react app, during my research I've seen examples of this using typescript, but I'm not sure why it's not working in my JS web app.

from my research online it seems that i need to redirect to the signin-callback.html in order to get my auth token but that's where im stuck

any help would be appreciated

signin-callback.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Authentification callback processing..</title>
</head>

<body>
    <noscript>
        You need to enable JavaScript to run this app.
    </noscript>

    <h1>Authentification callback processing...</h1>

    <script src="oidc-client.min.js"></script>
    <script>
        new Oidc.UserManager({ response_mode: "query" }).signinRedirectCallback().then(function () {
            console.log("Ter")
            window.location = "index.html";
        }).catch(function (e) {
            console.error(e);
        });
    </script>

</body>

</html>

settings

const settings = {
    authority: `${process.env.REACT_APP_AUTHORITY}`,
    client_id: `${process.env.REACT_APP_CLIENT_ID}`,
    redirect_uri: `${process.env.REACT_APP_REDIRECT_URI}`,
    response_type: `${process.env.REACT_APP_RESPONSE_TYPE}`,
    metadataUrl: `${process.env.REACT_APP_METADATA_URL}`,

};

main.js

const getUserInfo = async () => {
    userManager.getUser().then(async (user) => {
        if (user) {
            console.log('User has been successfully loaded from store.');
            // console.log(username)
            dispatch({ type: "JWT", payload: { displayName: username.data.DisplayName, user: user } });
        } else {
            console.log('You are not logged in.');
            userManager.signinRedirect();
        }
    });
}
useEffect(() => {
    // Test()
    getUserInfo()
}, [])

Original Q&A

There are 3 best solutions below

**Gary Archer** · Answer 1 · 2022-02-28T19:19:54.950000

In an SPA you should be able to just set the redirect to the SPA's main URL. Then, whenever the page loads, look for an OIDC login response, via the code, error and state parameters.If found, then call userManager.signInRedirectCallback(). I used to use this library a lot, and here are some examples:

Here is a React based example, to handle page loads and check for an OAuth response. Note that this does not use the oidc-client library and instead uses a more up to date Back End for Front End approach.

**JoelE** · Answer 2 · 2022-03-01T11:36:32.337000

After doing lots more research i was able to include the html page in via the webconfig file and redirect to it without a component

My webconfig

  plugins: [
    HtmlWebpackPluginConfig,
    new CopyWebpackPlugin({
      patterns: [
        { from: 'public/assets/favicon.ico', to: 'assets/favicon.ico' },
        { from: 'public/assets/manifest.json', to: 'assets/manifest.json' },
        { from: './public/signin-callback.html', to: 'signin-callback.html' },
        { from: 'public/silent-renew.html', to: 'silent-renew.html' },
        { from: './public/oidc-client.min.js', to: 'oidc-client.min.js' },
      ],
    }),
  ],

**CodeThag** · Answer 3 · 2022-10-27T03:57:51.110000

While I am sure you have moved on, this worked for me using react-oidc-context plugin. A simple direct function for the onSigninCallback property will resolve your issue. See screenshot below.


const oidcConfig = {
    authority: "https://localhost:44310/",
    client_id: "react_public_web_client",
    redirect_uri: window.location.origin,
    response_type: "code",
    scope: "openid email profile roles my_backend_api",
};

function onSigninCallback() {
    window.location.href = "/";
}

root. Render(
  <React.StrictMode>
      <Provider store={store}>
        <AuthProvider {...oidcConfig} onSigninCallback={onSigninCallback}>
          <App />
        </AuthProvider>
      </Provider>
  </React.StrictMode>
);

Oidc redirect to signin-callback.html

There are 3 best solutions below

Related Questions in REACTJS

Related Questions in OPENID-CONNECT

Related Questions in OIDC-CLIENT-JS

Related Questions in REACT-OIDC

Trending Questions

Popular # Hahtags

Popular Questions