It occurred to me that I never actually got into the nitty-gritty of my last post with some JavaScript code examples, and how easy it can be without being restricted to using templates that you need to force to make work.
Take these first scripts:
First, after including the API required, the first part is simply declaring your Domain and Client ID which you can find from the application's dashboard. The next two functions, _connectSocial and _login. Are very similar. The first takes a string of the social you would like to link (providing you have enabled it in your application within Auth0), and produces a popup modal for the user to enter their credentials.
The second function allows you to simply pass a username and password which you can use values from a form you create. You'll notice for both functions, it has a parameter it is passing called redirectUri. Here I am specifying for it to come back to the same page after the authentication has processed. Be sure to add whichever URI to follow on to as a valid callback URL within the Auth0 dashboard.
Finally I have created a _signup function. Use the email and password from values on your form you create, and you can use the usermeta variable as an object, each key must have a string value.
Before I go any further, perhaps there is a better way around it - but I found that by using a social login, using the popup modal dialog, that after the authentication is processed, it leaves that window open, along with the page he has redirected to (in my case, the same page I was on).
To compensate for this, I have added the following function:
What's happening here is, that when the authentication is finished, I am calling this function to validate the user in my website's backend (posting to /login). If it is successful and I find all the fields have been validated, I am storing the data to the users' session. When the request is complete, the script works out if the window it is currently executing the script in is a popup, it reloads its parent, and then closes itself.
The idea is that having a validated user in the session, reloading the page will first check if the user is logged in.
This begs one last question, how does the script know that it needs to verify the response from Auth0, if it is loading the same page from where it was requested from? The last point in my script I have the following:
The response comes back in the form of query string concatenated after a #. So after the page is loaded, and this value is picked up, it then calls the following function:
And hey presto! You've quickly ticked off logging in via social and custom form, as well as creating a custom signup function. As always, I'm open to gentle criticism and suggestions.
Take these first scripts:
First, after including the API required, the first part is simply declaring your Domain and Client ID which you can find from the application's dashboard. The next two functions, _connectSocial and _login. Are very similar. The first takes a string of the social you would like to link (providing you have enabled it in your application within Auth0), and produces a popup modal for the user to enter their credentials.
The second function allows you to simply pass a username and password which you can use values from a form you create. You'll notice for both functions, it has a parameter it is passing called redirectUri. Here I am specifying for it to come back to the same page after the authentication has processed. Be sure to add whichever URI to follow on to as a valid callback URL within the Auth0 dashboard.
Finally I have created a _signup function. Use the email and password from values on your form you create, and you can use the usermeta variable as an object, each key must have a string value.
Before I go any further, perhaps there is a better way around it - but I found that by using a social login, using the popup modal dialog, that after the authentication is processed, it leaves that window open, along with the page he has redirected to (in my case, the same page I was on).
To compensate for this, I have added the following function:
What's happening here is, that when the authentication is finished, I am calling this function to validate the user in my website's backend (posting to /login). If it is successful and I find all the fields have been validated, I am storing the data to the users' session. When the request is complete, the script works out if the window it is currently executing the script in is a popup, it reloads its parent, and then closes itself.
The idea is that having a validated user in the session, reloading the page will first check if the user is logged in.
This begs one last question, how does the script know that it needs to verify the response from Auth0, if it is loading the same page from where it was requested from? The last point in my script I have the following:
The response comes back in the form of query string concatenated after a #. So after the page is loaded, and this value is picked up, it then calls the following function:
And hey presto! You've quickly ticked off logging in via social and custom form, as well as creating a custom signup function. As always, I'm open to gentle criticism and suggestions.
Comments
Post a Comment