oidc-client
oidc-client copied to clipboard
AxaFrance
I Cannot add react-oidc to my nextjs project
Issue and Steps to Reproduce
I have to use react-oidc in next.js but i get error TypeError: Failed to fetch
Versions
"@axa-fr/react-oidc": "^5.11.0",
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
"@mui/icons-material": "^5.8.4",
"@mui/material": "^5.8.5",
"@mui/styled-engine-sc": "^5.8.0",
"connected-next-router": "^4.1.1",
"copyfiles": "^2.4.1",
"next": "12.1.6",
"next-redux-wrapper": "^7.0.5",
"oidc-client": "^1.11.5",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-intl": "^6.0.4",
"react-redux": "^8.0.2",
"redux": "^4.2.0",
"redux-devtools-extension": "^2.13.9",
"redux-oidc": "^4.0.0-beta1",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.4.1",
"styled-components": "^5.3.5"
Screenshots
My _app.js
import "../src/styles/globals.css";
import Head from "next/head";
import { Provider as ReduxProvider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import configureRedux from "../src/redux/configureRedux";
import ResponsiveAppBar from "../src/components/layout/Header";
import { OidcProvider } from "@axa-fr/react-oidc";
import { useState } from "react";
const { store, persistor } = configureRedux();
const configuration = {
client_id: "9b5433d0-6036-906f-5d47-3a04ac97119f",
redirect_uri: "http://localhost:3000/callback",
scope: "openid profile email api offline_access",
authority: "https://localhost:44333/",
service_worker_relative_url: "/OidcServiceWorker.js",
service_worker_only: true,
};
function MyApp({ Component, pageProps, router }) {
const [loading, setLoading] = useState(
router.asPath.includes("access_token")
);
let searchRedirectPage;
const withCustomHistory = () => {
return {
replaceState: (url, stateHistory) => {
router.replace({
pathname: url,
});
},
};
};
return !loading ? (
<>
<Head>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<title>Login Example with Next.js and Abp.io</title>
<meta
name="description"
content="Login Example with Next.js and Abp.io"
/>
<link rel="icon" href="/favicon.ico" />
</Head>
<OidcProvider
configuration={configuration}
withCustomHistory={withCustomHistory}
>
<ReduxProvider store={store}>
<PersistGate persistor={persistor} loading={null}>
<ResponsiveAppBar />
<Component {...pageProps} />
</PersistGate>
</ReduxProvider>
</OidcProvider>
</>
) : null;
}
export default MyApp;
My OidcTrustedDomains.js in /public
// Add here trusted domains, access tokens will be send to
const trustedDomains = {
default: ["http://localhost:3000"],
auth0: [],
};
My package.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"copy": "copyfiles -f ./node_modules/@axa-fr/react-oidc/dist/OidcServiceWorker.js ./public && copyfiles -f -s ./node_modules/@axa-fr/react-oidc/dist/OidcTrustedDomains.js ./public",
"start:server": "react-scripts start",
"build:server": "npm run copy && react-scripts build",
"prepare": "npm run copy"
},
"dependencies": {
"@axa-fr/react-oidc": "^5.11.0",
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
"@mui/icons-material": "^5.8.4",
"@mui/material": "^5.8.5",
"@mui/styled-engine-sc": "^5.8.0",
"connected-next-router": "^4.1.1",
"copyfiles": "^2.4.1",
"next": "12.1.6",
"next-redux-wrapper": "^7.0.5",
"oidc-client": "^1.11.5",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-intl": "^6.0.4",
"react-redux": "^8.0.2",
"redux": "^4.2.0",
"redux-devtools-extension": "^2.13.9",
"redux-oidc": "^4.0.0-beta1",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.4.1",
"styled-components": "^5.3.5"
},
"devDependencies": {
"autoprefixer": "^10.4.7",
"eslint": "8.18.0",
"eslint-config-next": "12.1.6",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.4"
}
}
Extra
i trying this on next.js app and abp.io backend i had added cors to my backend
Hi @MadeByForeV, thank you very much for the issue, your problem seem that your oidc server https://localhost:44333/ does seems to be reacheable.
what do you have in your network panel error?
does it work with:
client_id: 'interactive.public', authority: 'https://demo.duendesoftware.com',
?
I can reproduce the error with a nextjs starter.
I will add a full code sample as soon as i can.
hi @MadeByForeV , I have added a working demo here https://github.com/AxaGuilDEv/react-oidc/pull/804
i get an error :(
my identity server
my configuration inside _app.js
const configuration = {
client_id: "LoginExample_App",
redirect_uri: "http://localhost:3000",
scope: "openid profile email api offline_access",
authority: "https://localhost:44333/",
service_worker_relative_url: "/OidcServiceWorker.js",
service_worker_only: true,
};
i get loading text then i receive an error
hi @MadeByForeV ,
There is a bug I need to debug ^^
You can as a workaround set "authority_configuration" information inside your configuration
const configuration = {
client_id: 'interactive.public.short',
redirect_uri: 'http://localhost:3001/#authentication/callback',
silent_redirect_uri: 'http://localhost:3001/#authentication/silent-callback', // Optional activate silent-signin that use cookies between OIDC server and client javascript to restore the session
scope: 'openid profile email api offline_access',
authority: 'https://demo.identityserver.io',
authority_configuration: {
authorization_endpoint: 'https://demo.duendesoftware.com/connect/authorize',
token_endpoint: 'https://demo.duendesoftware.com/connect/token',
userinfo_endpoint: 'https://demo.duendesoftware.com/connect/userinfo',
end_session_endpoint: 'https://demo.duendesoftware.com/connect/endsession',
revocation_endpoint: 'https://demo.duendesoftware.com/connect/revocation',
},
};
as in the demo https://github.com/AxaGuilDEv/react-oidc/issues/802
you will find these information inside.
https://demo.duendesoftware.com/.well-known/openid-configuration
https:/youroidcserver/.well-known/openid-configuration
Hi @MadeByForeV ,
I think the fetch problem is fixed in the last alpha version. if you want you can make a try : https://black-rock-0dc6b0d03-817.westeurope.1.azurestaticapps.net/
Published under version 6.0.0-alpha0 The breaking change is that it require a new silent_signin_uri property and the silent_redirect_uri need to be declared to OIDC server.
Here a quick migration guide : https://github.com/AxaGuilDEv/react-oidc/blob/295776fbfeabde78f6d39ae5326f3a7da5050a11/MIGRATION_GUIDE_V5_TO_V6.md
Hi @MadeByForeV , everything is working fine now in v6. May we close the issue?
Hi @MadeByForeV, i think everything is OK now, i close the issue feel free to reopen it if needed. Thank you very much for this issue.