Best practice for Signup when using new React Auth0 SPA sdk

Help
, ,
1

Hi,

I’ve recently implemented the new react spa sdk for my website. Everything works great but my Login and Signup button right now redirect to the same login form. What is the best practice for a “signup first” form in this new sdk? The wrapper has a “loginwithredirect” function but no “signupwithredirect”. Thanks!!

Best,

Matthieu

2 Likes
3

Hey there @mgava!

Let me research that for you and see how you can achieve what you want!

4

Thanks, let me know when you find out!

5

@konrad.sopala any word on a solution?

6

Are you using the New ULP (Universal Login Page) or the Classic one (the one with the login/signup tabs)?

In case it’s the New ULP: it’s currently not possible to directly jump to the signup page instead of the login page, but might available in the future. (I had asked this internally before about a month ago, because I had somebody asking me the same question, but at the moment it’s not possible. I added it to the product backlog though).

(It is possible wit the Classic login page though.)

2 Likes
7

@mathiasconradt thanks for the reply. Yes I am using the new ULP. Any idea when the feature will be implemented? (estimate is fine). Also how did you guys set up your sign up for the Auth0 website? Custom Sign Up with /dbconnections/signup API call? Thanks!

2 Likes
8

Any idea when the feature will be implemented? (estimate is fine)

No, not yet. It’s just in the backlog without any priorisation at the moment.

Also how did you guys set up your sign up for the Auth0 website?

Yes, looks like custom UI to me. No idea about the details in the backend, as I’m not involved in the website development.

Note that with the Classic login page (as opposed to the New ULP), directing to signup tab right away is possible, see:

9

@mathiasconradt thanks for the pointers. how should I integrate signup for my single page react app with the auth0 spa client then? I like the new ULP a lot more and don’t really want to switch back. Is there also a way to know if the user is new or not?

1 Like
10

There’s a quickstart for React here:

https://auth0.com/docs/quickstart/spa/react/01-login

But note my previous comment:

So, for signup, the user needs to click on the signup link on the login page first in order to get to the signup page.

11

@mathiasconradt i’m aware of the quickstart tutorial, I’ve already implemented auth0. I was asking, with the new auth0 spa react sdk how can you tell if a user just signed up for the first time or logged in? thanks

12

There are different indicators:

Within a Rule, you have the following info available:

  • context.stats.loginsCount
  • user.loginsCount
    which should be 1 at first signup

Or you also can check the creation date with the login date:

  • user.last_login
  • user.created_at

Furthermore, for users of a database connection, you have the post-user registration hook, if you want to trigger certain actions upon signup.

Why do you want to know whether it’s a new user or not? What would you do with this info? Trigger a certain action?

1 Like
13

@mathiasconradt thanks for the help!! I wrote this rule to help me get the number of logins:

  function (user, context, callback) {
  user.user_metadata = user.user_metadata || {};
  user.user_metadata.logins = context.stats.loginsCount;
  context.idToken['https://example.com/logins'] = user.user_metadata.logins;

  auth0.users.updateUserMetadata(user.user_id, user.user_metadata)
    .then(function(){
        callback(null, user, context);
    })
    .catch(function(err){
        callback(err);
    });
}

Why does this rule need ‘http://example.com’ to work and it can’t just be a normal key like ‘logins’?
As for why I’m trying to figure out if the user is new: if it is the user’s first time logging in i would like for them to be redirect to a different url (/signup) and go through a signup process.

Thanks again

14

This https://example.com is a custom namespace, that’s relevant if you want to use custom claims to add to an ID or access tokens.

Note this info and the reason behind it:

You can add custom claims, but they must conform to a namespaced format to avoid possible collisions with standard OIDC claims.
[…]
Any non-Auth0 HTTP or HTTPS URL can be used as a namespace identifier, and any number of namespaces can be used. The namespace URL does not have to point to an actual resource, it’s only used as an identifier and will not be called by Auth0.

1 Like
15

Hi,

I also want to directly call the Signup Page. In fact, many big sites always show the Sign Up page first and you have to always switch to Login Page. This is imho much better than the other way round and will probably have a better conversion rate.

Please, let us know, when you have implemented the possibility for a direct call to Signup, maybe with a parameter like mode: ‘signUp’ or so.

Andreas

5 Likes
16

The authorization endpoint now supports a parameter screen_hint=signup which will redirect the user directly to signup page when using the new universal login experience.

2 Likes
17

Thanks for sharing that!

18

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