Typescript fails with auth0-spa-js

[ibraelillo]

Typescript fails with auth0-spa-js

[HIAB-vesteel]

I created a completely new and fresh angular cli app. https://github.com/HIAB-vesteel/auth0-missing-default

Just added auth0 as in the guide Angular: Login untill the section showing-profile-information.

Pull the solution down. run npm install and ng test

Only difference is empty object gets error in TS as its not matching type so i cast it with as:

If i instead actually try to add redirect url like below i get a new error:

Happy hunting

[HIAB-vesteel]

@stevehobbsdev Sorry man, end of the work day and i forgot the commit. Now its updated

[stevehobbsdev]

Hi @ibraelillo, another issue was raised with the same error, but in the Angular sample. It looked like it was because of a tsconfig problem: #45

Does anything in that issue help you?

[ibraelillo]

Hi @stevehobbsdev ,

I've already tried that example, and if I change my tsconfig.json then it breaks the platform. My auth component is part of a library which contains a lot of other components which are working with the current typescript config. The library is also shared between 3 other different apps, so, I have no choice but to find out what's happening.

As a context, I'm working with :

• nextjs 8.1.0
• next-with-typescript.

When I do ssr, it works well on the backend because the cjs generated module works fine, but then on the frontend it's raising the error from the auth0-spa-js.production.js file.

[luisrudge]

@ibraelillo can you create a simple repo with next+typescript and configs you're using that replicates the problem? I'll clone it and try to find the issue.

[HIAB-vesteel]

I´m just noting that i have the same error when running unit test in Karma.
I have the same AuthService as the tutorial right now.
In my navbar component i have the below code. In the navbar test i avoided/missed to mock the calls to auth0.

  async ngOnInit() {
    this.auth0Client = await this.authService.getAuth0Client();
    .....
  }

With #45 implemented unit test passes but in "afteall" i still get this

Don´t know if this could help you in the correct direction.
I´m still going for the mock approach so this won't be a problem in my case.

[stevehobbsdev]

@ibraelillo @HIAB-vesteel I think in order to progress this, a small repro case that you can share would be the most useful thing to help us.

[stevehobbsdev]

@HIAB-vesteel Are you missing some commits? I can't see anywhere in that project where Auth0 is used, and all the tests pass.

[stevehobbsdev]

@HIAB-vesteel The app looks fine from the point of view that it works. If I configure it with a valid domain and client ID then I can log in and use the app just fine. So it looks like the error has to do with how it's being tested. The tests are peculiar because it's the Navbar creation test which is failing, yet the error is being thrown by the call to handleRedirectCallback from the CallbackComponent. I'm not sure how that's happening.

Only difference is empty object gets error in TS as its not matching type

FYI if you update to [email protected], loginWithRedirect now accepts an empty parameter list, which should fix that.

@ibraelillo I'm almost sure that the problems you are having are to do with a misconfiguration somewhere. Could you please check out this FAQ question and come back to us once you've done that? Also, a repro app would be extremely helpful at this point.

[gurneyds]

I'm seeing the same issue. I create a sample app for React that works fine the first time that the user logs in, but when the page is refreshed the call to createAuth0Client() hangs. This means that the auth client is never set and downstream code chokes. I'm very new to auth0, so I could have something wrong but I can't seem to figure it out. The code for my sample can be found here: https://github.com/gurneyds/test-auth

[luisrudge]

@gurneyds can you see if this helps? https://github.com/auth0/auth0-spa-js/blob/master/FAQ.md#why-does-the-auth0client-object-take-a-long-time-to-initialize

[gurneyds]

I'm just trying to run the sample locally, so the values for "Allowed Callback URLs", "Allowed Web Origins", "Allowed Logout URLs" and "Allowed Origins (CORS)
" are all set to "http://localhost:3000/". The application does login the first time the page is refreshed. Clicking on the "Profile" link also works - UNTIL the page is reloaded, then it hangs on the call to "createAuth0Client". I've added some console.log statements to the code:

1111111111111111111111 auth wrapper before Auth0Provider
react-auth0-wrapper.js:16 2222222222222222222222 auth wrapper inside Auth0Provider
react-auth0-wrapper.js:25 3333333333333333333333 auth wrapper inside useEffect()
react-auth0-wrapper.js:28 4444444444444444444444 auth wrapper before createAuth0Client()
authorize:1 Failed to load resource: the server responded with a status of 400 ()

Clicking on the 'login' link then gives the following errors:

1111111111111111111111 auth wrapper before Auth0Provider
react-auth0-wrapper.js:16 2222222222222222222222 auth wrapper inside Auth0Provider
react-auth0-wrapper.js:25 3333333333333333333333 auth wrapper inside useEffect()
react-auth0-wrapper.js:28 4444444444444444444444 auth wrapper before createAuth0Client()
authorize:1 Failed to load resource: the server responded with a status of 400 ()

If I clear the cookies, then the login works again. There seems to be something in the processing when there are cookies that causes things to hang.

I really appreciate the help - this seems like a really great product and I can see myself using this for many projects - I just need to learn how it works and what I might be doing wrong.

[luisrudge]

@gurneyds Can you inspect your tenant logs? If there's any misconfiguration, it will probably show up there.

[luisrudge]

@gurneyds I looked at your client configuration and I believe you have a typo in the ‘Allowed Web Origins’ fields. It should be http://localhost:3000 and not http://localhost:3000/

[gurneyds2]

Yes indeed - thank you! The error messages are now gone. I would still expect the authentication to be valid when I refresh the page. After a successful login, the page works fine until I refresh the page. Refreshing the page causes several of the cookies to go away and the page is no longer authenticated. I am forced to authenticate again with each page refresh. Maybe I have another configuration problem?

[luisrudge]

@gurneyds If you check your tenant logs again, you'll see a warning about development keys.

[luisrudge]

I'll close this in favor of #99 because #99 has a repro project that I can test.