Auth0 - Quick start app not working

Help
, ,
1

Hello Guy’s , here is my scenario :

I am using the quick start application demo with AngularJS the last version. Authenticate with google auth and everything is going well, and everything’s seams to work fine.

Next step , customize the login page :
Im going to the customize login page, choose the custom template and modify my login page a little and since then, the application doesn’t receive the same token that It was before and the application get stuck with the never ending waiting in the call back page.

I can see that with the default lock page the callback is :

http://localhost:3000/callback#access_token=kndMkdWdcKFjFIsOcoQ92EqQT74rvNLk&expires_in=7200&token_type=Bearer&state=L8TwB2mK9TJibrOahRCqMWVKr9KN0CmW&id_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ik56bERNekV3TVVSRVFqWkVPVEkxUVRaRE9VWkROamhCTmtaQ01UQkJOVEpHTnpWQ01FSkdPQSJ9.eyJpc3MiOiJodHRwczovL3Mzc2RlbW8uYXV0aDAuY29tLyIsInN1YiI6Imdvb2dsZS1vYXV0aDJ8MTE1Mzg3MzIyNjMyMTQyOTQ4ODEwIiwiYXVkIjoidUJrV0VKMzFXaEVDVHdjalV1MnVtT0NOV3dGZmo0WXMiLCJpYXQiOjE1Mjk1ODQ0NjQsImV4cCI6MTUyOTYyMDQ2NCwiYXRfaGFzaCI6ImlWbHZGRTBGdlQ0aFJzdkJpdWR3eUEiLCJub25jZSI6ImFTRlVEeVhKRGdUYnZINzVTTXhYY0x2dXB5MVlVU0I0In0.mMqY91ItS4sbJbCoJujTBOlguCayhTsQG5c3DEXAuRzGFD1XGqB0ZT3EV4dMPIDtlenEm08JCExOQaf_ln5QiPZW3wJoUvWWnG9zFyprM_KxcTjTHeKTmdYvklY3FqhoVXjcwJAWly29WVhZjsRV3ERdhWnu9LMFYu1TBPQVQk6dAS1v-32OhDMwlRPUlVMkbOU-b5mwAioD0hj_T0_uNtwsjTevAmNJiqYc0bAR05bDeM3Jfm9luIE_iSM929hBFPqi_r4jdbJNIMx6D6GEW9zcQcUBt3o1Vpuxy8QlJKPAAb69szb1Q8RvPhCI4OKkN8TS3tkJlERvOM6gwAFrzg

And with the customized page the callback is :

localhost:3000/callback?code=2kYyiKkCGSg3iViC&state=rfsIm.SBnDDYlMpcI1Rh9bAdiTxt-kvu

What is the problem , why the token is different and how can I work with his ?

Thanks I am waiting for your reply guys :slight_smile: !

1 Like
3

:wave: @cleclerc is this the quickstart you are referring to ? and with AngularJS 1.7.2?

4

Hello Kim, thanks for the reply, I am talking about this demo application :

Sorry for the confusion I should add the link on the post :slight_smile: !

Thanks

5

No problem :slight_smile: I just wanted to confirm I was trying the right one. I am going to give it a shot with the demo application you sent and see if I can reproduce the issue!

6

Here are some screenshots off what I have :slight_smile:

09%20AM
09%20AM3360×2100 543 KB
19%20AM
19%20AM3360×2100 601 KB
40%20AM
40%20AM3360×2100 451 KB

7

is there anything in your Chrome logs or logs in Auth0 by any chance @cleclerc? Does this happen with either email/password login and Google?

8

I look at my chrome, there is nothing in there and I use google auth only because it’s the purpose of my POC.
I can make it a try with the username / password.

Are you able to reproduce the problem on your end ?

9

@kimcodes Any news on that for me ?

10

It works with the normal username / password from the authentication database in the auth0 account. Just not with the google auth.

11

I apologize for my delay in reply. The quickstart works out of the box for me with Google auth. Can you maybe share with me the customization you made? It’s most probably something in our customization that could be causing this issue. The Google connection was working prior to your customization? Was it/is it setup with developer keys?

12

Hello Kim, thanks for following up !

The scenario that is not working well is when we update the login page to get a custom one, and authenticate with google ( works with standard username / pwd)

With this configuration :

15%20AM
15%20AM859×598 31 KB

The only thing that I changed in this code was this :

  <div class="login-container">
    <div class="col-xs-12 col-sm-4 col-sm-offset-4 login-box">
      <div class="login-header">
        <img src="http://www.s3s.ca/assets/img/logo.png" />
        <h3>Demo</h3>
        <h5>Demo login page integration</h5>
      </div>

I reproduce this behaviours on 2 different account but never touch the code from the simple application.

Here is the way to reproduce the problem.

Create a company
Create a new single page app
Download the quick start from angular-5
Create a custom login page in your configuration
Authenticate with google.

(I didn’t change the google code key can it be the problem ? )

You can trigger the code with the callback right here :slight_smile:

https://s3sdemo.auth0.com/login?state=9fU3QdMcFm2Zgk71f_tiH2pouHtZkxpA&client=uBkWEJ31WhECTwcjUu2umOCNWwFfj4Ys&protocol=oauth2&response_type=token%20id_token&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fcallback&scope=openid&audience=https%3A%2F%2Fs3sdemo.auth0.com%2Fuserinfo&nonce=AJreEYIeBKFrzXbzKb8hcdXQoqhPNYnP&auth0Client=eyJuYW1lIjoiYXV0aDAuanMiLCJ2ZXJzaW9uIjoiOS42LjEifQ%3D%3D

Cheers.

13

Thank you for the provide steps and more information! I followed the link and made it to the consent page but then I was not able to proceed as it sent me to localhost. Is the application currently only running locally on your machine?

Also, were you able to setup your Google connection as described here https://auth0.com/docs/connections/social/google

14

Hello, yes the code is running on my machine, you will be able to get the redirection token that is not correct though.

You can reproduce the problem by using any application with any company in the quick start. Should I open a bug report in the GitHub ?

15

:wave: @cleclerc were you able to solve your issue, did you open a bug report? Please let me know we can re-look into your issue.

16

Hello Kim,

Unfortunately, I didn’t open an issue on that problem because I had the problem in a POC and the company chooses not to use Google’s auth and I had to switch on another project ASAP.

I would suggest you reproduce the problem though, it would be beneficial for any developers that would need this scenario.

Cheers,