search

AxaFrance / oidc-client

Light, Secure, Pure Javascript OIDC (Open ID Connect) Client. We provide also a REACT wrapper (compatible NextJS, etc.).
MIT License
597 stars 160 forks source link

I Cannot add react-oidc to my nextjs project #802

Closed emreucmaZ closed 2 years ago

emreucmaZ commented 2 years ago

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

image

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

guillaume-chervet commented 2 years ago

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',

?

guillaume-chervet commented 2 years ago

I can reproduce the error with a nextjs starter.

I will add a full code sample as soon as i can.

guillaume-chervet commented 2 years ago

hi @MadeByForeV , I have added a working demo here https://github.com/AxaGuilDEv/react-oidc/pull/804

emreucmaZ commented 2 years ago

Thanks, i set wrong client_id to my configuration.

emreucmaZ commented 2 years ago

i get an error :( image image

my identity server image image

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

guillaume-chervet commented 2 years ago

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

guillaume-chervet commented 2 years ago

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.

guillaume-chervet commented 2 years ago

Here a quick migration guide : https://github.com/AxaGuilDEv/react-oidc/blob/295776fbfeabde78f6d39ae5326f3a7da5050a11/MIGRATION_GUIDE_V5_TO_V6.md

guillaume-chervet commented 2 years ago

Hi @MadeByForeV , everything is working fine now in v6. May we close the issue?

guillaume-chervet commented 2 years ago

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.