Auth0 - Quick start app not working

cleclerc · June 21, 2018, 12:36pm

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 !

kimcodes · June 21, 2018, 2:11pm

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

cleclerc · June 21, 2018, 2:25pm

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 !

Thanks

kimcodes · June 21, 2018, 2:38pm

No problem 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!

cleclerc · June 21, 2018, 3:12pm

Here are some screenshots off what I have

kimcodes · June 21, 2018, 4:27pm

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?

cleclerc · June 21, 2018, 6:32pm

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 ?

cleclerc · June 26, 2018, 5:01pm

@kimcodes Any news on that for me ?

cleclerc · June 26, 2018, 5:33pm

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

kimcodes · June 27, 2018, 1:42pm

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?

cleclerc · June 27, 2018, 2:10pm

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 :

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

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.

kimcodes · June 28, 2018, 8:54pm

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

cleclerc · June 28, 2018, 9:03pm

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 ?

kimcodes · September 6, 2018, 3:00pm

@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.

cleclerc · September 6, 2018, 3:27pm

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,