grab query params from redirect angular 5

5
votes

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!

2
javascriptangulartypescriptauth0auth0-lock
i think you have to check in NavigationStart and NavigationEnd where your router is being captured simultaneously – Sanoj_V
@Sanoj_V not sure what you mean? – Smokey Dawson
can you tell me what type of path you have set in your router. – Sanoj_V
Its all done via auth0 so you set a redirectUrl, which is http://localhost:4200/account/login/callback – Smokey Dawson
have you tried same path different parameter url like this: /account/login/callback and /account/login/callback/:acessToken – Sanoj_V

2 Answers

0
votes

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.

-1
votes

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']);
                     }
                 });