Angular 10 SPA Error on redirect after login: there are no query params available for parsing

[Stormtalons]

I have an Angular 10 app using Auth0 that suddenly stopped working today. Around noon I could log in successfully, but in the midafternoon I started getting this error upon returning from a successful login. I know they are successful because I can see them in the logs in my dashboard.

I saw the other thread with a similar error from Aug '19, but I’ve confirmed with logs that the redirect callback is only being made once. I also reverted my site code to a version from weeks ago, when I know for certain the integration was working, and I am still receiving this same error. This makes me think the issue is on the Auth0 service side, but the service status page shows no interruptions, so I am open to anything… is this a known issue? What can be done to fix it? Please let me know if I can provide any additional information or context.

core.js:4442 ERROR Error: There are no query params available for parsing.
at e. (auth0-spa-js.production.esm.js:15)
at auth0-spa-js.production.esm.js:15
at Object.next (auth0-spa-js.production.esm.js:15)
at auth0-spa-js.production.esm.js:15
at new ZoneAwarePromise (zone-evergreen.js:960)
at r (auth0-spa-js.production.esm.js:15)
at e.handleRedirectCallback (auth0-spa-js.production.esm.js:15)
at MergeMapSubscriber.project (auth.service.ts:35)
at MergeMapSubscriber._tryNext (mergeMap.js:46)
at MergeMapSubscriber._next (mergeMap.js:36)
defaultErrorLogger @ core.js:4442
handleError @ core.js:4490
next @ core.js:28096
schedulerFn @ core.js:24910
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:24900
(anonymous) @ core.js:27568
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
runOutsideAngular @ core.js:27472
onHandleError @ core.js:27568
handleError @ zone-evergreen.js:368
runTask @ zone-evergreen.js:170
invokeTask @ zone-evergreen.js:480
ZoneTask.invoke @ zone-evergreen.js:469
timer @ zone-evergreen.js:2552
setTimeout (async)
scheduleTask @ zone-evergreen.js:2573
scheduleTask @ zone-evergreen.js:385
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:210
scheduleMacroTask @ zone-evergreen.js:233
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1134
(anonymous) @ zone-evergreen.js:2586
proto. @ zone-evergreen.js:1449
hostReportError @ hostReportError.js:2
error @ Subscriber.js:156
_error @ Subscriber.js:75
error @ Subscriber.js:55
_error @ Subscriber.js:75
error @ Subscriber.js:55
_error @ tap.js:56
error @ Subscriber.js:55
notifyError @ OuterSubscriber.js:7
_error @ InnerSubscriber.js:14
error @ Subscriber.js:55
(anonymous) @ subscribeToPromise.js:8
invoke @ zone-evergreen.js:364
onInvoke @ core.js:27545
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
(anonymous) @ zone-evergreen.js:857
invokeTask @ zone-evergreen.js:399
onInvokeTask @ core.js:27533
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
drainMicroTaskQueue @ zone-evergreen.js:569
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:552
scheduleTask @ zone-evergreen.js:388
scheduleTask @ zone-evergreen.js:210
scheduleMicroTask @ zone-evergreen.js:230
scheduleResolveOrReject @ zone-evergreen.js:847
then @ zone-evergreen.js:979
bootstrapModule @ core.js:28133
zUnb @ main.ts:11
webpack_require @ bootstrap:79
0 @ comment-filter.pipe.ts:6
webpack_require @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1

[stephanie.chamblee]

Hi @Stormtalons,

Welcome to the Community!

Since it sounds like the behavior changed without altering the code, I’m wondering if this is a race condition related to when the handleRedirectCallback fn runs. You may have already tried this, but if you add a breakpoint somewhere before that function is called, is it running at some point when the code and state query param isn’t available in the URL (maybe due to another redirect)?

[Stormtalons]

Hi Stephanie, thank you very much for the reply.

I am newish to web development, so I had not tried setting a breakpoint (or even knew how, in javascript) before your suggestion. What I found is that when this callback is being made, it does seem like the parameters are populated in the URL. See here. If I hit continue at that point, I will land back at my home page, but without the parameters visible in the URL, with the error, and without this breakpoint having been hit again. I do not see any additional redirects being made.

Do you have any suggestions for further troubleshooting?

[stephanie.chamblee]

Thanks for sending the screenshots! Based on those, it does seem like handleRedirectCallback is called when there are query params. Still, I’m wondering if it does not complete because of the redirect back to home since handleRedirectCallback is an async function.

Does your Angular Router contain a redirect (redirectTo)? If so, you could try removing it.

This topic is for an Angular 9 app, but may be helpful: Angular 9 application with Auth0 keeps on redirecting after successful login in Firefox - #8 by kphay-11

You could try passing the URL to handleRedirectCallback like in the solution.

Also, are you using auth0-angular or another Auth0 SDK? Also, which version?

[Stormtalons]

Thank you for linking that thread… kphay-11’s solution resolved my issue. I didn’t need the delay, but saving the URL and passing it back into client.handleRedirectCallback got rid of the error for me.

I am still left confused how/why this was working at all before and why it chose now to break, but some mysteries go unsolved I guess. Thank you so much for your help!

[stephanie.chamblee]

Awesome! Glad the topic helped!

Could be because handleRedirectCallback is async, but that it is odd how it was consistently working, and then it was consistently failing .