Custom Sign-Up

Ask the community
,
1

I love the idea of adding a Custom Sign-Up features for editors to add to their website. Thank you Wix. I for one have made both a Custom Sign-Up and a Login page for my members. The keyword here is “page”. Wix currently only allows Custom LightBoxes to pop up if a member needs to login/register. Although this is not a huge problem, I feel like allowing developers the opportunity to send users to their custom pages would play an importance in Wix Code.

2

Who do you do this ? I did custom LightBox but it is not applied to the site , default one is appearing when I click signup or login . Can you help me please?

3

i’m using a dynamic page as bridge for external links (you are leaving this site…). it would be nice being able to do that using dynamic light boxes to reduce reload time.
The light box would just close instead of reloading the page.

4

I believe you have to go to your “Member Sign-Up Settings”, once clicked on the bottom you should see a “Want to use a customized sign-up form?” text, select it and enable it, you should link it with your lightbox.

866×1032 60.6 KB

5

Not sure what you’re about exactly, but sounds interesting. Would like to know if this is related to users logging in? Or does the Dynamic page simply act as a preloader?

6

To do that inside a lightbox, you can use HTML component (iframe), and put there whatever you want.
However, most likely that no external login provider will allow you host them inside an iframe.
What I did with Google login (and you can modify for other providers) was to put a native html button inside an html component. that button opens a new window with the 3rd part login, and it can recieve back the token from the login window.
This is the code of the iframe with the google login button:

<html>
<style>
body {
	background-color: transparent;
}
.my-signin {
  position: absolute;
  left:50%;
  transform: translateX(-50%); /*this centers the button inside the iframe*/
}
</style>
<body>

<script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>

<meta name="google-signin-client_id" content="XXXXX-XXXXXXXXXXXX.apps.googleusercontent.com">/*put your googgle token here*/

<div id='my-signin2' class="g-signin2 my-signin"></div>

<script>
function onFailure(error) {
	console.log(error);
}
function renderButton() {
	gapi.signin2.render('my-signin2', {
	'scope': 'profile email',
	'width': 240,
	'height': 50,
	'longtitle': true,
	'theme': 'dark',
	'onsuccess': onSignIn,
	'onfailure': onFailure
	});
}

function onSignIn(googleUser) {
  let gtoken = googleUser.getAuthResponse().id_token;
  let gProfile = googleUser.getBasicProfile();
  let profile = {
	  id:gProfile.getId(),
	  name: gProfile.getName(),
	  image: gProfile.getImageUrl(),
	  email: gProfile.getEmail()
  };
  console.log(gtoken, profile);
  window.parent.postMessage({gtoken:gtoken}, "*"); /*this sends the token to wixcode on the page*/
}
</script>

</body>
</html>

The code on the page that takes the token from google and pass it to some backend function:

import {updateBrandedEmail, createMember} from 'backend/registration';
import wixUsers from 'wix-users';

$w.onReady(function () {
    $w("#html1").onMessage(msg => {
        console.log("got gtoken:", msg);
        createMember(msg.data.gtoken)
        .then (res => {
 if (res.approved) {
                console.log(`user id before applying session token ${wixUsers.currentUser.id}`);
                wixUsers.applySessionToken(res.sessionToken)  //user is now logged-in
                .then(() => {
                    console.log(`user id after applying session token ${wixUsers.currentUser.id}`);
                    //here you can say something to the user "you are now logged in"
                })
 
            }
        })
        .catch(err => {
            showError (err);
        });
    })

});

and the last part, your backend code that gets the token and create the member (registration.jsw):

import {GOOGLE} from "./config";/*this is where google secrets are stored*/
import wixUsers from "wix-users-backend";
import {fetch} from "wix-fetch";

export function createMember(googleToken) {
 //get profile from googleToken
 let url = `https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=${googleToken}`;
 return fetch(url, {method: "GET"})
  .then( (httpResponse) => {
 if (httpResponse.ok) {
 return  httpResponse.json();
      }
 return Promise.reject(new Error("bad response from google"));
  })
  .then (profile => {
    console.log("got token from google", profile);
 //validate clientid in the response matches our own client id in google (mandatory validation)
 if (profile.aud !== GOOGLE.SIGNIN_CLIENT_ID) {
 return Promise.reject(`bad client id, profile.aud:${profile.aud}, GOOGLE.SIGNIN_CLIENT_ID:${GOOGLE.SIGNIN_CLIENT_ID}`);
    }
 return wixUsers.register(profile.email, getRandomString(), { //TODO: if user already registered, just sign-in
      firstName: profile.given_name,
      lastName: profile.family_name,
      picture: profile.picture
    })
 //approve the user
    .then( (result) => {
      console.log("user is registered", result);
 return wixUsers.approveByToken(result.approvalToken);
    })
 //return session to client
    .then( (sessionToken) => {
 return {sessionToken, "approved": true};
    });
  })
}