How to directly link to login page

[jpayne0061]

How can I provide a direct link to the auth0 login form?

Currently, users visit my web app, which then redirects them to the login page.

I’ve seen a similar question asked, but the respondent only offered this link: https://auth0.com/docs/universal-login#pass-in-custom-parameters, which is a bad link.

Do I have to provide the state parameter? If so, how do I know what value to provide?

[dan.woda]

Hi @jpayne0061,

Welcome to the Auth0 Community Forum!

You can configure a login route in your application that redirects the user to your tenants authorize endpoint. This concept is described here:

Configure Default Login Routes

Using nonce and state is described here:

Redirect Users

Generating nonce is described here:

Mitigate Replay Attacks When Using the Implicit Flow

If you describe your implementation we may have a library or example that can help.

Thanks,
Dan

[jpayne0061]

@dan.woda , thank you for taking the time to reply.

I’ve read through the links you’ve provided, but I am still unclear as to how I can directly link to the login page.

I’ll describe my current implementation (which works fine) and then, how I want it to work. I’m somewhat of a noob when it comes to authentication, so hopefully you’ll understand what I’m explaining.

Currently, I have an angular application that uses the following code to authenticate users, after they have clicked some button:

  auth0 = new auth0.WebAuth({
    clientID: 'bfkjbfaskdjbcsdbwfecvsdhbshdb',
    domain: 'some-domain.auth0.com',
    responseType: 'token id_token',
    audience: 'https://api.some-domain.com',
    redirectUri: appUrl,
    scope: 'openid app_metadata email'
  });

I then call
auth0.authorize();

The user is directed to the auth0 login page. I can see that a state parameter is generated in the query string, whose value I assume holds the data found in the auth0 object above. Once the user enters their credentials, they are redirected back to the angular application along with an access token. This works fine.

Here is how I want it to work:

I have a landing page which is completely separate from the angular app. It would be really helpful if users could click on a link on the landing page and be taken directly to the auth0 login page. I have tried to implement the code above on the landing page, but when the user is finally redirected to the angular app, I can see that the authorization has failed, with an error: “invalid_token” and an error description “state does not match”.

This error happens in the angular app. I can see in the auth0 logs that the user has authorized successfully.

After reading the links you provided, I still do not know how I would accomplish this. One link you provided mentions that I would need to store a nonce in localStorage for the state parameter to work, so I’m unsure if this is possible, since the landing page and angular app are two different domains.

Thank you for your help,

Evan Payne

[dan.woda]

Hi @jpayne0061,

Could you expose a route that calls the login method from your auth component? I am not an angular expert, but I tried adding a login component and /login route that calls this.auth.login() on init and it directed me to universal login through a redirect.

[jpayne0061]

@dan.woda

Dan, that is a good idea.

I ended up integrating the landing page into my angular app, since I couldn’t figure it out.

Hopefully this will help someone else with the same problem, though!

[dan.woda]

@jpayne0061,

Thanks for replying with your solution!