How to LoginWithRedirect to specific signup provider such as Google, Yahoo, etc

Help
,
1

I’m trying to prevent the signup process for social logins (first login event.stats.logins_count === 1) based on certain conditions. After denying the signup, I show a custom error page with a specific message and provide a button that triggers the LoginWithRedirect method, with the label set to ‘Signup’ (screen_hint: ‘signup’) and pre-populating the user’s email using the login_hint property. This part works as expected.

However, the issue is related to when a user attempts to sign up using their Google account. Instead of being redirected to the default Auth0 signup page, is there a way to redirect them, for example in this case, to choose their Google account (as they would during a normal Google login). Is there a way to ensure that the user is redirected back to the Google account selection page instead after the signup attempt?

3

Hi @jonatan.lavado!

Can I ask what SDK and version you are using? Depending on that, the way to send the connection parameter might change. For example, in a SPA js SDK and also the React SDK you have to send it within the AuthorizationParams in the latest versions of the SDK such as:

loginWithRedirect({authorizationParams: { connection: "connection_name" } })

You can see more details of this in the following docs: AuthorizationParams | @auth0/auth0-spa-js and Community post that might be useful as well: Pre-select a single social connection to skip Auth0 login for New Universal login

Please let me know if I can help further!

Thanks,

Mary Beth

4

Hello @marybeth.hunter, thank you for taking the time to respond. I’m working with React and I am somewhat familiar with the use of the connection property. What isn’t completely clear to me, though, is how to determine the type of connection the user used. Similar to how the error_description provides the value passed to api.access.deny('error_key') and how the email is returned as a query parameter, is there a way to know the type of connection the user used by reading the query parameters, or is there a way to set this information elsewhere?

5

Any update on this @marybeth.hunter? I don’t know why this topic was marked as solved/completed.

6

Hi @jonatan.lavado,

Thank you for your patience! We’ve been out for the US Veteran’s Day holiday.

To access the connection used in the flow in an Action, you can use the event.connection.name or event.connection.id properties. Event object documentation: Actions Triggers: post-login - Event Object

Please let me know if you have any additional questions!

Best,

Mary Beth

7

Hello @marybeth.hunter, thank you again. Just want to make sure everything’s clear here, I want to access to this connection property in my React frontend. Is there a way to send that property through the PostLogin Action in auth0 to my React app?

8

Hi @jonatan.lavado,

Yes! I apologize for misunderstanding. You can add the connection.name or connection.id to the user’s ID Token as a custom claim and access that property in the front end. See below Action code example:

exports.onExecutePostLogin = async (event, api) => {
  api.idToken.setCustomClaim("connection name: ", event.connection.name);
  api.idToken.setCustomClaim("connection id: ", event.connection.id);
};

In your application, you can do something like this:

  const { user, getIdTokenClaims } = useAuth0();
  const [claims, setClaims] = useState(null);

      {isAuthenticated && (
        <>
          <button onClick={async () => setClaims(await getIdTokenClaims())}>
            Get id_token claims
          </button>
          {claims && (
            <pre>id_token_claims: {JSON.stringify(claims, null, 2)}</pre>
          )}
        </>
      )}

Once the Action is deployed and the above code is added, you can see the claims in the ID Token and use the connection information as you see fit. Please note that the above code is intended to be an example only and should be thoroughly tested in a development environment before being added to production.

Referencing: auth0-react/static/index.html at 6429fdd31959548906a2ee1ecc8ec4d3a137ebc3 · auth0/auth0-react · GitHub

Please let me know if you have any additional questions!

Best,

Mary Beth

1 Like
9

Hello @marybeth.hunter,

I’ve tried the solution you provided, but I’m always getting undefined as the result, and I believe it’s because the user is not authenticated at this point. Is there any way to implement this logic for users who are not yet authenticated?

I’m trying to implement this after a user gets denied by api.access.deny. Specifically, after a user is denied, I catch this event on my React frontend and then trigger a redirect using the loginWithRedirect method. The issue is that the user is never authenticated before this point, so I’m unable to access any claims.

10

Hello @marybeth.hunter any update on this?

11

Hi @jonatan.lavado,

Thank you for your patience!

I’ve looked into this and have conferred with some teammates. It is not possible to access connection information from an unauthenticated user in your application’s front end.

The connection information is present in the associated logs in the tenant, however. Depending on your plan and if you have log streaming configured, you could set up an alert or monitor for Failed Login logs with the description denied and implement your own logic to send that information to your React app.

That is a pretty roundabout half-solution, though, so if you wanted to submit feedback about this, I’d recommend it! Please follow this guide: How to Submit Product Feedback or Feature Requests

Thanks,

Mary Beth

1 Like
12

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.