Auth0 Home Blog Docs

Implementing a custom Auth0 SignUp Page

auth0
auth0js
custom-login
error
sign-up
#1

I am currently trying to implement a custom user sign up page for my Auth0 tenant. Therefore I came across this example provided by Auth0. You can find it here.

The form looks like this:

I added my own tenant, client id and connection to the files. Besides that there is a simple js referencing bug but that’s not the problem here.

When filling out the form and clicking on “Sign up” I get this error alert:

The console is showing me this:

Help is very much appreciated. Thank you

#3

Hi @maximilian_cs,

Welcome to the Auth0 Community!

Did you make sure to set up your allowed web origins?

1 Like
#5

@maximilian_cs,

Could you provide a sample of the request you are making that causes this? Please scrub of any sensitive data.

Thanks,
Dan

#6

@maximilian_cs,

Did you end up finding a solution?

#7

Yes, thank you for your help!

#8

Great, let us know if there is anything else we can do to help!

Best,
Dan

#9

@dan.woda Indeed there is another mystery I’m am trying to solve. I am now using Auth0 Universal Lock after heavily customizing it to fit my needs. Because I do not want users to create an account and have access to the services I want to block them from signing in.

So there are two possibilities now:

1. Every time I create a new user I add in user.metadata e.g. "allowed":false;. When a user tries to sign in a rule/hook gets executed that checks if the user is allowed to use the service. Then the user can continue or gets an error message. This is a little workaround because 2. is not quite working.

2. Every new created user is blocked from the start. However it is not so easy to implement this behavior. There is already a thread about this: Block users on bulk creation?

@dan.woda I would be totally fine with using possibility 1. How can I accomplish that within the rule.

#10

@maximilian_cs

There are many ways you could accomplish this, and I think you are on the right track. Here are a few examples:

It is difficult to decide which method is best for your use case without more information on how user permissions are handled and whether or not this is something that is happening programmatically or if you have an admin that adds users permissions manually based on some criteria.

I would be happy to work with you further on this if you would like to provide more info on your use case. Otherwise, good luck!

Thanks,
Dan

1 Like
#11

Hi @dan.woda,

thanks for these tips.I am now trying to implement this using the following rule:

function (user, context, callback) {
  if (user.app_metadata.roles.includes('Approved user')){
    return callback(null, user, context);
  }
  else {
    return new callback(new UnauthorizedError("This account is not approved yet."));
  }
}

This is working and only approved users can sign in. That’s great! However there is no error message displayed to the user and also not approved users are redirected to my app. They will be blocked out there but this is causing problems within my applications (i.e. nextcloud).

  1. How can I show an error message to the user and then simultaneously sign the user out before redirecting them to my app?

  2. I customized the Universal Login of Auth0 Lock. When a users signs up the array "rules" is not created. Because of that, more problems occur with the code you see above. How can I solve this? Maybe you can tweak my javascript rule a bit.

I don’t know how to write these lines of code and it would be very appreciated if you could help.

Thanks
Max

#13

I find the webtask log extension a great way to debug your rules.

Can you try putting a console.log(user.app_metadata.roles) in your rule somewhere to make sure it includes the correct values. In addition, adding some console.logs to your conditionals can help determine what is happening on those logins on unauthorized users vs authorized users.

I don’t see any big issues in the rule. How are you handling the error you return if the user is not authorized?

Thanks,
Dan

#14

@dan.woda The error is not handled in a special way. I thought that Auth0 would display the UnauthorizedError by itself. However that is not happening. The user is always getting redirected to my application. That however should only happen when the user is authorized to use the service.

#15

@maximilian_cs Did you get the opportunity to try the logging that I mentioned above? I also see that the rule is turned off in your tenant, just making sure that is not the problem.

Thanks,
Dan

#16

@dan.woda I turned it off to prevent more errors and damage made by the not correctly handled error.

#17

@dan.woda After a lot of testing I decided to do the following:

1. First, when a users signs in a rule is checking if the user is approved or not. If the user is not approved, the user should get logged out instantly before being redirected to any other page. How can I do that? I did not find any useful documentation on the sign out process that was helpful. Can you maybe provide me the necessary javascript code for this action? The existing docs from Auth0 on logging users out are not covering this in a simple and easy way.

When the user is logged out I would redirect him back to my homepage with this code in the rule:

function (user, context, callback) {
    context.redirect = {
        url: "https://example.com/"
    };
    return callback(null, user, context);
}

2. In addition to that I tried to set top a hook for Pre User Registration using the following code:

   module.exports = function (user, context, cb) {
  var response = {};

  // Add app metadata to the newly created user, create "rules": [ ]
  response.user = {
   app_metadata: { rules: [""]}
  };

  response.user = user;
  cb(null, response);
};

By this I can prevent that the array roles don’t exist in user.app_metadata. However the hook is not working/running correctly. :frowning:

Thanks,
your help is very much appreciated!

#18

That redirect rule you listed first is going to effect all users, because there is not condition limiting who it has effect on. You should be redirecting after an error in your app, not using a rule. Your pre reg hook is also using the key rules when I think you mean roles.

The first thing I would do before exploring any more workarounds is to see if the initial rule is working correctly by console logging. Try this please:

function (user, context, callback) {

  console.log('Running user approved rule');

  if (user.app_metadata.roles.includes('Approved user')){
    console.log('Approved user metadata:');
    console.log(user.app_metadata);
    return callback(null, user, context);
  }
  else {
    console.log('Not approved user metadata:');
    console.log(user.app_metadata);
    return new callback(new UnauthorizedError("This account is not approved yet."));
  }
}

Thanks,
Dan

#19

@dan.woda Ok I used the code provided by you. The console logs however are not really helpful because this part already works as expected.

Console output:
image
When using this user data:

I planned on integrating the redirection into the if/else statements so only unauthorized users get redirected. This is not possible on the application side and that’s why this workaround is really needed. But at this point a logout before redirecting would be useful to obtain security and prevent more errors. That’s my problem here.


Unfortunately something with the hook is not working correctly. There is just nothing that happens with this hook. See also this thread:

#20

@dan.woda

UPDATE: I completely modified the structure of my rules and they are now working perfectly fine. Thank you very much for your help.

I know have the following issue:

#21

I am glad you were able to figure it out!

Best,
Dan