grab query params from redirect angular 5

Question

My problem is I'm using auth0 as my authentication service, now when a user logs in and is authenticated it gets redirected back to my callback url which then decides where to send the user now my problem is when you get redirected back to your callback url from auth0 there are queryParams in the url string like so..

http://localhost:4200/account/login/callback#access_token="dsadsadsadsa dasdsaa" just as an example but then in a split second the query string is removed and its left at http://localhost:4200 now Im trying to grab the query Params using this method

this.activatedRoute.queryParams.subscribe(params => {
    console.log(params);
});

now this should work but the console.log is an empty object every time, I think its because of that url change that happens..

Is there some way I can grab the query params before that removal??

EDIT

Basically what is happening is I'm getting authenticated then I get redirected to

localhost:4200/account/login/callback?acessToken="dasdasdaefssves"

but then the route changes to

localhost:4200/account/login/callback

without the query parameters before the activatedRoute function gets a chance to run!

Any help would be appreciated!

i think you have to check in `NavigationStart and NavigationEnd` where your router is being captured simultaneously — Sanoj_V, May 17 '18 at 06:12
can you tell me what type of path you have set in your router. — Sanoj_V, May 17 '18 at 06:19
Its all done via auth0 so you set a redirectUrl, which is `http://localhost:4200/account/login/callback` — Smokey Dawson, May 17 '18 at 06:20
have you tried same path different parameter url like this: `/account/login/callback` and `/account/login/callback/:acessToken ` — Sanoj_V, May 17 '18 at 06:27
@Sanoj_V Ive just tried that but Im getting redirected back to my base route now instead — Smokey Dawson, May 17 '18 at 06:31
Hey I am facing this issue too........ need to extract code from redirected url which is again redirected by angular routing in split seconds — Rohit Kumar, Jul 24 '20 at 19:49

score 0 · Answer 1 · answered May 17 '18 at 06:27

0

Notice your redirect-url is http://localhost:4200/account/login/callback?access_token="dsadsadsadsa dasdsaa"

but angular routes it to localhost:4200/account/callback

NOTE

You don't have that /account/login/callback route defined in angular. But you have /account/callback route instead. Angular tries to resolve the route and redirects its to /account/callback without the queryParams.

Define the route in angular and your issue will be resolved.

answered May 17 '18 at 06:27

j4rey

2,582
20
34

I declared the route like this /login/callback/:authInfo but now I keep getting redirected to base url? any ideas? – Smokey Dawson May 17 '18 at 06:31
Please see updated question I had a typo in there, i actually meant to write /account/login/callback the whole time so this isnt the issue – Smokey Dawson May 17 '18 at 06:35
If your auth service is redirecting to `http://localhost:4200/account/login/callback?access_token="dsadsadsadsa dasdsaa"` then you need to define a route in your angular project for `account/login/callback` because `?access_token="dsadsadsadsa dasdsaa"` is a querystring. – j4rey May 17 '18 at 06:35
1

yeah I understand that but I do actually have that route defined I just didnt type it properly in my question which has now been fixed – Smokey Dawson May 17 '18 at 06:36
in the comment you wrote you declared a route `/login/callback/:authInfo`. I believe it should be `login/callback` instead. – j4rey May 17 '18 at 06:39
No so I originally had it as login/callback but then after your comment I changed it to /login/callback/:authInfo and neither worked – Smokey Dawson May 17 '18 at 06:40
any idea on how to preserve querystring – Rohit Kumar Jul 24 '20 at 19:51

score -1 · Answer 2 · answered May 17 '18 at 05:58

I didn't get your complete question but as much as I understand. You want to get query parameter from URL.

To get query parameter from URL You need to do this.

 constructor(private activatedRoute: ActivatedRoute){}

This is how you can get all the query params from URL.

this.activatedRoute.queryParamMap
                .map((params: Params) => params.params)
                .subscribe( (params) => {
                     if(params && params['access_token']){
                        console.log(params['access_token']);
                     }
                 });

Sorry no this isnt the question, basically what happens is the query parameters are on the url for 1s before they are removed so when this.activatedRoute runs there are no query parameters to grab which is why I keep getting back an empty object — Smokey Dawson, May 17 '18 at 06:07

grab query params from redirect angular 5

2 Answers2