auth0-angular and angular-SSR integration

[codenode22]

Checklist

• [X] I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
• [X] I have looked into the API documentation and have not found a suitable solution or answer.
• [X] I have searched the issues and have not found a suitable solution or answer.
• [X] I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• [X] I agree to the terms within the Auth0 Code of Conduct.

Describe the problem you'd like to have solved

i am converting my regular angular application to angular SSR application however auth0 is not compatible with angular SSR. I am using following 2 npm packages: "@angular/ssr": "^17.0.0", "@auth0/auth0-angular": "^2.2.1", i am getting following error on server start up: ReferenceError: location is not defined at AuthService2.shouldHandleCallback at new AuthService2

Describe the ideal solution

usually all angular applications are converted to angular-SSR applications to make them SEO friendly - if the plan is to host them on internet. Since auth0 is compatible with angular application i want auth0 to be compatible with angular-SSR

Alternatives and current workarounds

not any i know of

Additional context

No response

[frederikprijck]

Thanks for reaching out.

Our SDK should work with SSR if you set it up correctly. Did you look at https://github.com/auth0/auth0-angular/blob/main/FAQ.md#7-using-the-sdk-with-angular-universal?

Additionally, you can have a look at my comment here: https://github.com/auth0/auth0-angular/issues/305#issuecomment-1118261182, as well as that entire thread. You can also look at the PR I opened for that user to fix their SSR application: https://github.com/auth0/auth0-angular/issues/305#issuecomment-1122052793

It also looks like you are using a service that's called AuthService2, which probably isn't ours. So you want to ensure you correctly set that up for SSR as well.

If none of that helps, please provide a reproduction for us to look into.

[codenode22]

yes i have looked at the link you suggested however i feel it is an error prone and complicated way of handing this error. i am expecting some more robust way of handling it.

i have included other angular third party libraries - one is primeng......they have taken care of this issue in their library....."primeng": "^16.7.2", i enable/disable angular SSR my code works fine.......they did not have this feature in their earlier versions (for example 13.1.0 had same issues

• reference error ) .....and suggested to work the same way you are suggesting in the link you shared......however with their latest version they have fixed it .......no need to think about all those angular SSR gotchas..... i have raised this in an enhancement request in your code.......

the problem is here: in auth0 library....... ReferenceError: location is not defined at AuthService.shouldHandleCallback at new AuthService

i looked at the code in your github repo at https://github.com/auth0/auth0-angular

in projects/auth0-angular/src/lib/auth.service.ts https://github.com/auth0/auth0-angular/blob/35dc709b77488ab4276d3f9df48ddf425f77cd06/projects/auth0-angular/src/lib/auth.service.ts#L329 private shouldHandleCallback(): Observable { return of(location.search).pipe( map((search) => { const searchParams = new URLSearchParams(search);

i think there should be a possibility of handling it the same way primeng is handling it. Let me know if that is possible.

On Tue, Nov 14, 2023 at 4:09 PM Frederik Prijck @.***> wrote:

Thanks for reaching out.

Our SDK should work with SSR if you set it up correctly. Did you look at https://github.com/auth0/auth0-angular/blob/main/FAQ.md#7-using-the-sdk-with-angular-universal ?

— Reply to this email directly, view it on GitHub https://github.com/auth0/auth0-angular/issues/534#issuecomment-1811314430, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXNYPNEMWWHMQAZ2OCPVGT3YEPMXVAVCNFSM6AAAAAA7LKYMIKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMJRGMYTINBTGA . You are receiving this because you authored the thread.Message ID: @.***>

[frederikprijck]

We rely on code that relies on the window object (not just the code you linked, but other libraries used internally for the core functioanlity), our SDK can not work with SSR in the way i think you describe. Instead it works by following option 2 of he official angular universal recommendation for using libraries that rely on the window object

Regarding primeng, i assume you are referring to this? If so, that's one of the 3 official solutions mentioned on the angular universal gotchas when working with window, but we cant use that and we need option 2.

Closing this, as this works as designed.

Happy to review a PR if you disagree with the above and have any idea how we could improve.