Nextjs support

[geniusit]

I try to use the library in a nextjs application. I just replace default value with these :

I got this error when accessing localhost:3001 :

I also see that the query params are not sent.

Did I misunderstand something with the library? Is this library able to work in a context outside of axa?

[guillaume-chervet]

Hi @geniusit ,

Thank you for your issue. The library should work with any oidc provider.

Which oidc provider do you use?

What append if you update scope to :

scope: "openid profile offline_access",

[geniusit]

@guillaume-chervet I use OpenAM I tried to change the scope with "openid profile offline_access" but the issue still persists.

[guillaume-chervet]

Thank you, i will make a test with openam.

[guillaume-chervet]

I did not get the time to test today. I will try tomorrow @geniusit , Thank you it will help to make the library better.

[geniusit]

@guillaume-chervet No problem. Thank you too. BTW we are former colleagues ;) I ve worked for AXA too (Wasquehal)

[guillaume-chervet]

I am sorry for the delay @geniusit . I am on it as soon as i can. I have a bush month ^^

[fffan64]

next.js is not made for spa, so i doubt you can use this lib.

maybe it will be possible with that: https://nextjs.org/blog/layouts-rfc but not available yet

[guillaume-chervet]

Hi @fffan64 , react oidc is compatible with nextjs. But Server side rendering won't work well on the not authorised part. I have to check why it does work with OpenAM. Very sorry @geniusit for the delay.

[ZeKap]

Hello, I've tried using react-oidc on NextJS 13 using the /app route instead of /pages, but looking at the example for NextJS it seems like it's not actually possible since we're using 'next/router' which isn't compatible with the /app router. I'm not sure to understand everything in the example, but I've tried my best, maybe you have an idea to do a workaround?

Also, with what I tried I have the error: Error authentication An error occurred during authentication. right after the login('/account') but looking at the console I don't have much more informations. The login seems to work sometimes because I get a token and its countdown, but still get the error page.

[vanquishkuso]

@ZeKap Hi, I got it to work with /app folder in Next.js 13.4.0. I just changed it to windows.location.href, maybe not the most optimal solution but it works until router gets another workaround/fix.

const withCustomHistory = () => { return { replaceState: (url: string) => (window.location.href = url), }; };

[guillaume-chervet]

hi @vanquishkuso , I Close the issue. It is compatible nextjs and more now. Thank you very much for your issue.

[vanquishkuso]

Hi @guillaume-chervet, great to hear. Although it might be off topic, I also had problem with oidc-react preventing the server from initially loading the page (it instead showing a white loading page). I assume this is bad for SEO. Can this be fixed or overwritten in some way?

[guillaume-chervet]

Hi @vanquishkuso , yes I will solve this issue. Thank your for your feedback. I reopen the issue to trace it.

[vanquishkuso]

That's great to hear! I have tried to get other packages to work with SSR but I just can't get it to work. Will your fix also work for child components calling useOidc() even though the package hasn't authenticated them (e.g. window hasn't been loaded in the provider or before dynamic urls has been set in the oidc config)?

[guillaume-chervet]

hi @vanquishkuso , I have published a first alpha 7.4.0-alpha.1025 where i remove loader. It works but I think I have to add loader information into hook to make consumer to choose to disploay loader or not.

I'am off during 3 weeks.

[vanquishkuso]

Hi @guillaume-chervet, great, that was fast! Will give it a test next week.

[vanquishkuso]

Hi again @guillaume-chervet, I tested to convert our app to oidc-react and I ran in to the same issue as before with router.replace: Argument of type '{ pathname: any; }' is not assignable to parameter of type 'string'. Property 'then' does not exist on type 'void'.ts(2339)

Adding back the workaround which is not optimal (below), I get it to work, but i get window is not defined. const withCustomHistory = () => { return { replaceState: (url: string) => (window.location.href = url), }; };

[guillaume-chervet]

Thank you @vanquishkuso for the feedback. Do you have a sample that can help me to reproduce? I am off for 3 weeks. I will look at this when i will be back.

[vanquishkuso]

Hi @guillaume-chervet, I tried to reproduce it in codesandbox but couldn't. It may be something with my setup in my original project.

What I do have problem with is making it work with dynamic configuration. For us, the urls are stored in a json file locally which has to be fetched. When fetch is complete it updates the configuration state. Rendering null if configuration is not set works fine, but then the whole app gets delayed. Is there a workaround for this?