Login after User Registration

[TroubleShooter]

Hello guys,

 

Is it possible to automatically login a user after they have registered for an account?

Hoping someone can help

 

Thanks in advance,

TroubleShooter

[DefinitelyNot31337]

Hello @TroubleShooter,

 

Yes, you can. Currently, it is only possible with JavaScript.

 

The idea is to place the Registration Form and Standalone Login Page side-by-side (or at least, in the same page).

You may hide the Login Form ( using <div style="display: none;"></div> on the Header/Footer of the DataPage || More about here...), on your Registration Page but I rather keep them visible so the users can opt to just log-in if they already have an account; or register, if they don't.

 

After registration, JavaScript will fill-out the login form, and submits it programatically, therefore logging-in the newly registered user.

 

The only requirements to this implementation are:

1.) Login DataPage and Registration Form DataPage are deployed on the same page.

2.) Both DataPages are AJAX-Enabled!

3.) Headers/Footers should have the HTML Editor disabled from the Advanced tab.

 

Without futher ado, let's do this.

1.) Open DataPage Configuration for your Registration Page:

2.) Go to 'Configure Fields Section'

2.1.) Add a Header and Footer (Disable HTML Editor from the advanced tab)

2.2.) Paste the code snippet in the Footer and modify the following information.

<script>

  document.addEventListener('BeforeFormSubmit', function() {
    var registrationDP = "[@cbAppKey]";


    var loginDP = "378fd3458dfsjhefjhqerwfdsyui3274239"; //Replace with the AppKey of your Standalone Login Scren
    var username_field = "username"; //replace with the name of your username field (CASE SENSITIVE!)
    var password_field = "password"; //replace with the name of your password field (CASE SENSITIVE!)

    
    //No modifications necessary from this point onward.
   document.querySelector(`[action*="${loginDP}"] [id*=xip_username]`).value = document.querySelector(`[action*="${registrationDP}"] [id*=InsertRecord${username_field}]`).value
   document.querySelector(`[action*="${loginDP}"] [id*=xip_password]`).value = document.querySelector(`[action*="${registrationDP}"] [id*=InsertRecord${password_field}]`).value
  
  })

</script>

 

5.) Go to 'Destination and Messaging'

5.5) Set Destination after record submit to: Display a message; Disable the HMTL Editor!

5.6) Paste the code snippet below; then modify.

Registered Successfully. 

<script>
   var loginDP = "378fd3458dfsjhefjhqerwfdsyui3274239";
   document.querySelector(`[action*="${loginDP}"]`).submit();
</script>

 

 

After saving, you should be good to go.

Working example: https://stage.caspio.com/support/forums/DefinitelyNot31337/register-login/index.html

Application Export Package: CaspioData_2019-Apr-02_0219.zip

 

Good luck and happy hacking!

 

Regards

DN31337!

[Harbinger]

Wow! Thanks for sharing, @DefinitelyNot31337

I've thought of this but not sure how to do it in Caspio. Now I am able to do it. Thanks again.