Linking to application login from a different website

Help
1

Hi there,
I’m using the new login experience and am trying to get the following behaviour:
From a sales website on the same domain as my app, I want to have a button linking to the Auth0 login page and the auth0 sign up page (i.e two buttons that link off to separate tabs) for that app.

I.e. I have sales.domain.com and app.domain.com - app.domain.com has an Auth0 front end application on it. I want to have buttons on sales.domain.com that link off to the login and sign up tabs on the new experience login/signup for the auth0 app at app.domain.com.

I can’t find anywhere in the management console where those login pages live. I can log out from my application, and I end up at the login screen again, the URL for that looks like:

https://$TENANT.$REGION.auth0.com/u/login?state=$STATE_STRING.

So if I navigate to

https://$TENANT.$REGION.auth0.com/u/login or https://$TENANT.$REGION.auth0.com/u/signup I get an error, because obviously this is not the right way to do it, but it’s also kind of what I want, I’m just not sure how to find the right URL, or if it is even possible?

Has anyone tried something like this before? Any tips on where to find the right URL, if there is one?

2

I have similar setup: login link from website (www.domain.com has login/signup button) and app.domain.com has Angular application with Auth0 frontend.

www.domain.com login button redirects to app.domain.com/login where is just simple call to

auth0.loginWithRedirect({
        redirect_uri: `${window.location.origin}/app/authorize`,
        appState: { target: redirectPath },
        prompt: true
      });

User hits Login button on website, is redirected to app.domain.com/login where Auth0 redirects user to Auth0 login with proper state etc.

This means a little extra roundtrip but finally your user ends at https://$TENANT.$REGION.auth0.com/u/login?state=valid_state_string_here

Or you, especially when you want custom designed signup, I suggest to use auth0.js. You can handle login & signup click directly on sales.domain.com and get redirected right there, avoid round trip to app.domain.com/login

3

Hi @4lexnz,

You should always redirect users to the /authorize endpoint in the first instance when using OpenID Connect. A screen_hint=signup parameter can be passed to this endpoint if you want users to see a sign up page rather than a login page.

1 Like
4

Hi Andy,

This does not answer my question unfortunately, I’ve tried https://$TENANT.au.auth0.com/authorize?client_id=$CLIENT_ID?screen_hint=signup and this gets me an error page. It doesn’t get me to the new login experience page on either the login tab or the experience tab.

5

Thanks for sharing, Luke. I’m going to take a look and see if I can do something simillar :slight_smile:

6

Hi @4lexnz,

It looks like you are not including all required parameters to initiate the authentication flow, and being able to redirect the user to a login or sign up page is more complex than a direct link to it. There are a number of different factors that come into play, such as the authentication flow you want to use and how your app is configured. I’ve included links to further information below.

For example, with an app configured to use the Authorization Code flow, an example call to the /Authorize endpoint will be:

GET https://YOUR_DOMAIN/authorize?
  response_type=code&
  client_id=YOUR_CLIENT_ID&
  connection=CONNECTION&
  redirect_uri=https://YOUR_APP/callback&
  state=STATE&
  ADDITIONAL_PARAMETERS

(Line breaks for readability)

So your link will look something like:

<a href="https://YOUR_DOMAIN/authorize?
  response_type=code&
  client_id=YOUR_CLIENT_ID&
  redirect_uri=https://YOUR_APP/callback&
  scope=openid%20profile&
  state=xyzABC123">
  Sign In
</a>

(Line breaks for readability)

This is where the original answer of adding the additional parameter of screen_hint should be comes into play, as it will need to be added to the request to the /authorize endpoint if required:

<a href="https://YOUR_DOMAIN/authorize?
  response_type=code&
  client_id=YOUR_CLIENT_ID&
  redirect_uri=https://YOUR_APP/callback&
  scope=openid%20profile&
  state=xyzABC123&
  screen_hint=signup">
  Sign In
</a>

https://auth0.com/docs/flows/guides/auth-code-pkce/add-login-auth-code-pkce

Can you let us know what authentication flow you are using for your app please?

1 Like
7

This is very helpful so thanks for the information :slight_smile:

I guess that’s what is really throwing me here. You’re talking about redirect but I just want to direct.

For the signup button, users don’t have an existing relationship and they’ve never done the flow before, so what should the state parameter be? Can I just put anything in there?

Unfortunately my angular application is erroring out with this ERROR Error: The requested path contains null segment at index 0 - but I’m relatively confident that’s my fault not Auth0’s.