Auth0 Home Blog Docs

Hosted Pages / External API call

#1

Is is possible to call my Auth0 protected API from the Auth0 hosted login/signup page?

I need to be able to create a user account in our CRM system BEFORE creating the Auth0 account. That process is in a REST API that is secured via Auth0, but does Auth0.js give you access to do that via ajax without exposing the client secret?

Is this even possible?

#2

Are you using your own hosted login/signup page?
Is it required that you create your user before signup in auth0? You can use a rule for that if you allow the user to be created first on auth0.
If you want to go CRM->auth0 then you will need to implement your own logic for that flow.

1 Like
#3

I’ll try not to ramble here. I think I spent the last 24/48 scouring the entire internet for a solution here.

I wanted to make a custom signup page hosted on Auth0. I really can’t go the Auth0 user->CRM route because we are using our custom DB. I need our CRM customer ID first before creating a login. I don’t want the user to enter username/email and password go to another page to enter name and address. Based on what I know about rules, they fire AFTER the login is complete, so technically it is another page, which isn’t the best experience. If I am wrong, how do I pass the name, address, and any other data we collect to a rule that would get fired after the account is created? I have tried to find examples of anyone doing that.

My biggest concern is that I have a REST api to create the account and I know I can call it with jquery on custom signup page. BUT I need to have it secured, or anyone can sniff, or ‘view source’, and get the url and could create random accounts. I was hoping since I can secure it using Auth0, why can’t I somehow generate the token securely on the hosted page via the Auth0.js, and call that REST api. Once that is completed, I can creating the Auth0 account since I now have the CRM customer ID (and user _id also)?

#4

You can add some fields to the signup form https://auth0.com/docs/libraries/lock-ios/v2/custom-fields and access them later on the rule after the creation.

About the custom DB, do you have your users stored in that custom db and then you migrate them to auth0, or you want to have a copy of the users that signup in your custom db.

#5

We are taking a stepped approach. We won’t start transitioning until all vendors have implemented Auth0. Once they all implement, we will migrate everyone to auth0 for a few months, then import everyone else by the end of the year.

Yeh, it looks like only 10 fields maximum. I’m not sure that is enough. I know, that seems like alot, but for a membership organization, it is crucial to have that data up front during account creation. I know there’s a white paper on taking a stepped approach on gather data, but some things a really required up front.

So I guess the answer to my question is that it is not possible to authenticate an Auth0 protected API in the Auth0.js hosted signup page?

#6

How are you showing the signup form? As you mentioned, you need to collect some information of the user, so how are they going to input all the fields?

You can use Auth0js to signup user https://auth0.com/docs/libraries/auth0js/v9#signup, but this should be outside the auth0 login/signup page

#7

https://auth0.com/docs/libraries/when-to-use-lock#custom-user-interface this part might be the case you want to do, as it outside of the scope of the lock what you try to achieve

#8

Jose,

This is something I was hoping to accomplish (just a snippet) on the custom hosted signup page.

My concern is the ability to secure the call to “http://localhost:3671/api/Register” (just running locally for this example, but will be a publicly accessible domain)

 $("#thisBtn").click(function (e) {
                //show waiting..
e.preventDefault();
                //prevent Default functionality
                var settings = {
                    "async": true,
                    "crossDomain": true,
                    "url": "http://localhost:3671/api/Register",
                    "method": "POST",
                    "headers": {
                        "content-type": "application/json"
                    },
                    "processData": false,
                    "data": "{\"FirstName\" : \"$('#signup-firstname').val()\",\"LastName\" : \"$('#signup-lastname').val()\", \"Email\" : \"$('#signup-email').val()\",\"EmailLocation\" : \"WORK\",\"CountryCode\" : \"USA\", \"Address1\" :......
                }

                $.ajax(settings).done(function (response) {
                    //hide 'watiing'...
                    if (response.MasterCustomerId && response.MasterCustomerId != "") {
                        var settings = {
                            "async": true,
                            "crossDomain": true,
                            "url": "https://YOUR_AUTH0_DOMAIN/dbconnections/signup",
                            "method": "POST",
                            "headers": {
                                "content-type": "application/json"
                            },
                            "processData": false,
                            "data": "{\"client_id\": \"YOUR_CLIENT_ID\",\"email\": \"" + response.Email + "\",\"password\": \"$('#signup-password').val()\",\"connection\": \"YOUR_CONNECTION_NAME\",\"user_metadata\": {\"mcid\": \"" + response.MasterCustomerId + "\"}}"
                        }
			  $.ajax(settings).done(function (response) {

                            console.log(response);
                        });
#9

How are you planning to collect all the information of the user? As you will not be able to use the auth0 signup page, you will need to create the form by yourself in your own signup page.
Auth0 do not provide such service to redirect your call to your API.
One alternative that I am thinking is that you signup the user, and using the rules you can redirect them to a new page that would be complete the information, that will call to your backend and then you can collect the user there, at this point user will be logged. But again you will need to call your API, that will be public.

#10

Jose,

I am sorry for the late response. I figured it out and moved on to other things. I needed the proof of concept to work.

I actually used the code above on the auth0 signup page and it worked. I just modified the base html/js. When a user clicks ‘signup’, a different form is presented (jquery hide()/show()). It has username, password, first name, last name, address, etc. The drop down options are populated by calling a custom rest service. On clicking the button to create an account, I attempt to create the customer using my rest service, something like https://www.mysite.com/api/Register, if that works and gives me back a customer ID, I call /dbconnections/signup. It took me a bit of time to realize that I needed to verify the email address before I could login, so, to get it to work, I adjusted the script for login to mark the verified flag to be true. So then, after signup, I called webAuth.login and voila, I was directed to my application. Now in the real world, I would tell the user to verify their email address instead of getting an error message that I was getting.

I was hoping that since I am calling this api/service (http://www.mysite.com/api/Register) on the hosted universal login page that I could somehow have it secured by Auth0 and authenticated via Auth0, but I have asked that question several times and not really got a straight answer, so I assume it is a ‘No, you can’t authenticate to an Auth0 secured application from the Auth0 hosted universal login page’