CODEWITHSUNDEEP
reactjsopenid-connectoidc-client-jsreact-oidc
JoelE
JoelE

Reputation: 309

Oidc redirect to signin-callback.html

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()
}, [])

Upvotes: 0

Views: 8565

Answers (3)

CodeThag
CodeThag

Reputation: 93

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>
);

Upvotes: 1

JoelE
JoelE

Reputation: 309

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' },
      ],
    }),
  ],

Upvotes: 0

Gary Archer
Gary Archer

Reputation: 29218

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.

Upvotes: 0

Related Questions