Affinidi Login - Passwordless Authentication for Wix

In this guide, learn how to integrate Affinidi Login on your Wix website.

Affinidi Login can be integrated easily with any application that supports OIDC flow.

This integration guide provides step-by-step instructions to enable users to have a Passwordless Login experience into your Wix website using Affinidi Login.

Assumptions

  1. You already have a development site created where you would configure Affinidi Login. If you need to create one, then follow the instructions here.

  2. Information presented here is recommended as a learning guide for non-production environments. We recommend to reach out to Affinidi team through Discord to assess and adjust the production readiness together for your specific store.

Before you begin

  1. Set up Affinidi Vault account. Follow the guide below if you haven’t set it up yet.
Set up Affinidi Vault

Set up an Affinidi Vault account using the Web Vault or install the Mobile Vault (for Android).

The same setup steps for Mobile Vault.

  1. Click on Get started if you are creating a new account, or click on Restore from Backup if you have an existing backup of your Affinidi Vault. Provide the Passphrase to secure your Affinidi Vault.

You have the option to enable Biometrics to unlock your Affinidi Vault easily instead of using Passphrase.

Affinidi Vault Setup
  1. Enter your email address to register with the Affinidi Vault. An OTP will be sent to this email for verification.
Affinidi Vault Passphrase
  1. Enter the OTP sent to the email you have provided for verification to complete the setup.
Affinidi Vault Email Verification

After successfully providing the OTP, you are redirected to the Affinidi Vault dashboard.

  1. Optionally, install the Affinidi CLI. Follow the guide below if it hasn’t been installed.
Set up Affinidi CLI
  1. Download and install NodeJS on your machine if you haven’t set it up yet.
  1. Install Affinidi CLI using Node Package Manager (npm).
npm install -g @affinidi/cli
  1. Verify that the installation is successful.
affinidi --version
  1. Enable the Dev Mode on your Wix site.

Create Login Configuration

To create a Login Configuration, you can either use Affinidi CLI or  Affinidi Portal.

Expand the section below for your preferred method:

Name: Wix Site

Redirect URIs: Set the Redirect URI based on your Wix site.

e.g. https://<WIX_SITE_HOST>/_functions/getAuthCallback

Auth Method: none

Using Affinidi CLI
  1. Log in to Affinidi CLI by running:
affinidi start
  1. Once you have successfully logged in, create the Login Configuration by running:
affinidi login create-config \
--name='Wix Site' \
--redirect-uris='{Wix_Redirect_URI}' \
--token-endpoint-auth-method=none
  • --name is what you want your login configuration to be called.
  • --redirect-uris is the URL on your application where the user gets redirected after the successful authentication. Replace {Wix_Redirect_URI} with the redirect URI value based on your Wix site.
  • --token-endpoint-auth-method is the type of the authentication method to use, for Wix Site, we are using PKCE standard so we set the Auth Method to none.

Sample response:

{
  "ari": "ari:identity:ap-southeast-1:687b8872-a618-dt63-8978-e72ac32daeb1:login_configuration/c4f74d936cd31bde1c1fd3c1050bb76s",
  "projectId": "687b8872-a618-4e52-8978-e72ac32daec2",
  "configurationId": "c4f74d936cd31bde1c1fd3c1050bb62d",
  "name": "...",
  "auth": {
    "clientId": "<AUTH.CLIENT_ID>",
    "clientSecret": "<AUTH.CLIENT_SECRET>",
    "issuer": "https://<PROJECT_ID>.apse1.login.affinidi.io"
  },
  "redirectUris": [
    "..."
  ],
  "clientMetadata": {
    "name": "Login Config Name",
    "logo": "https://login.affinidi.com/default-client-logo.svg",
    "origin": "https://example.com"
  },
  "creationDate": "2023-08-11T06:26:37Z",
  "tokenEndpointAuthMethod": "none"
}

Learn more on how to manage your Login Configurations using Affinidi CLI.

Using Affinidi Portal
Create new Login Configuratioin
  1. Go to  Affinidi Login under the Services section.

  2. Click on the Create Login Configuration and provide the required details.

  • Name is the string that describes your login configuration.
  • Redirect URIs is the URL on your application where the user gets redirected after the successful authentication.
  1. Click on create and confirm if all the details are correct.
Login Configuratation new client
  1. After confirming the details, another popup shows the Client ID and Client Secret for your Login Configuration. Copy the generated Client Credentials and use them to integrate with Affinidi Login.

  2. After copying the Client ID and Client Secret and closing the popup, you are redirected back to the Affinidi Login page.

Login Configuration uses the default Presentation Definition (presentationDefinition) and ID Token Mapping (idTokenMapping) that is used to request the user’s email address during the authentication flow.

ID Token Mapping Template

When creating or after creating the Login Configuration, we have to modify the ID Token Mapping to move the email field from the custom claim to the top-level claim following the OIDC standard.

To modify the ID Token Mapping of the Login Configuration, expand the Additional Configuration section and look for the custom Presentation Definition. Click the Create New button when creating a new Login Configuration or click on Edit button when editing an existing Login Configuration.

Use the ID Token Mapping below:

[
  {
    "sourceField": "$.credentialSubject.email",
    "idTokenClaim": "$.email",
    "inputDescriptorId": "email_vc"
  },
  {
    "sourceField": "$.type",
    "idTokenClaim": "$.custom[0].type",
    "inputDescriptorId": "email_vc"
  },
  {
    "sourceField": "$.issuer",
    "idTokenClaim": "$.custom[1].issuer",
    "inputDescriptorId": "email_vc"
  }
]

The ID Token Mapping format the ID Token claim to have the email at the top-level claim to align with the standards.

Setup Client Credentials

After configuring the Login Configuration, securely store the provided Client Credentials and a static Code Verifier using Wix Secret Manager.

  1. Go to the Secrets Manager page.
  2. Click on Store Secret and set the Name to affinidi-sso-credentials.
  3. Copy the JSON string below, paste it on the Value field and save.
{
  "client_id": "<LoginConfig_CLIENT_ID>",
  "issuer": "<LoginConfig_ISSUER_URL>",
  "code_verifier": "<RANDOM_43_CHARACTER_LENGH_SECRET_STRING>"
}
Wix Secrets Manager

Set up the Wix Site

By default, Wix does not allow changes to the Signup and Login pages, to customise these pages:

  1. Go to the Pages & Menu page.
  2. Click on the Signup & Login menu.
  3. Click on the Member Signup Form and Member Login Form to change from Default to Custom Form.
Wix Custom Signup Form

Create a new blank page after changing the default forms to a custom form.

This page acts as a loading page and parses the ID Token to create and auto-login the user into the Wix site.

  1. Set the name of the page Affinidi LoggedIn.
Wix New Page
  1. Add the text to the page:
Please wait, we are logging you in...
  1. Hide this new page from the menu item since it is only used as a loading page during authentication.

  2. Add the below code to process the Token once it is received after successful authentication.

import { applyToken } from 'public/affinidi/client.js'
import wixUsers from 'wix-users';
import wixLocationFrontend from 'wix-location-frontend';

$w.onReady(function () {
	console.log('Affinidi Logged-in page initiated');
	applyToken().then(() => {
        // Gets user email
        wixUsers.currentUser.getEmail().then((email) => {
            console.log('user logged in', email);
        });
		    wixLocationFrontend.to('/account/my-account');		
    }).catch(error => {
		  console.error('error ', error);
		  wixLocationFrontend.to('/');
	  });

});
Wix Custom Page

After creating the new page, ensure that the URL generated for the page is /affinidi-loggedin.

Implement Integration Code

After creating the custom page, we will create several files to integrate Affinidi Login.

  1. Go to the Packages & Apps and install the npm package openid-client.
Wix Package Installation
  1. Go to the Public & Backend menu to upload the integration codes.
Wix FE and BE Codes
  1. Copy the code from here and follow the folder and file structure below:

-- Public
    -- affinidi             /* Add folder */ 
        - client.js         /* Add new js file */ 
        - util.js           /* Add new js file */ 
-- Backend
    -- affinidi             /* Add folder */ 
        - affinidi.web.js   /* Add new web module file */ 
        - auth.js           /* Add new js file */ 
    - http-functions.js     /* Add js file, ignore it if already exists */ 

Customise Signup & Login Forms

Once the code is implemented, we will modify the frontend to display the Affinidi Login button for Custom Signup and Custom Signin forms.

Customise Signup Form:

  1. Open the Custom Signup.
  2. Add a new element using the type Icon Button.
  3. Download and use the following images to render the buttons in different states:
Affinidi Login Button Default

Regular Image

Affinidi Login Button Hover

Hover Image

Affinidi Login Button Cliked

Clicked Image

  1. Set the tooltip as Affinidi Login and ID to affinidiLogin.

  2. Add an onClick event handler for the buttons using the below code:

import { getAuthUrl } from 'public/affinidi/client.js';
import wixLocationFrontend from 'wix-location-frontend';

export async function affinidiLogin_click(event) {
  $w('#affinidiLogin').disable();
	console.log('Signup Page, Affinidi Login button clicked');
  try {
      const url = await getAuthUrl();
      wixLocationFrontend.to(url);

  } catch (error) {
      console.error(error);
  }
	$w('#affinidiLogin').enable();
}
Wix Custom Signup Form

Customise Login Form:

  1. Open the Custom Login.
  2. Add a new element using the type Icon Button.
  3. Download and use the following images to render the buttons in different states:
Affinidi Login Button Default

Regular Image

Affinidi Login Button Hover

Hover Image

Affinidi Login Button Cliked

Clicked Image

  1. Set the tooltip as Affinidi Login and ID to affinidiLogin2.

  2. Add an onClick event handler for the buttons using the below code:

import { getAuthUrl } from 'public/affinidi/client.js';
import wixLocationFrontend from 'wix-location-frontend';

export async function affinidiLogin2_click(event) {
  $w('#affinidiLogin2').disable();
	console.log('Login Page, Affinidi Login button clicked');
  try {
      const url = await getAuthUrl();
      wixLocationFrontend.to(url);

  } catch (error) {
      console.error(error);
  }
	$w('#affinidiLogin2').enable();
}
Wix Custom Login Form

Optional Header Menu Change

Optionally, add the Affinidi Login button to the Header Menu, which will display the button on all pages.

  1. Go to Home page.
  2. Add a new element with type Icon Button.
  3. Download and use the same images downloaded for Custom Signup Form to render the buttons in different states:
Affinidi Login Button Default

Regular Image

Affinidi Login Button Hover

Hover Image

Affinidi Login Button Cliked

Clicked Image

Set the tooltip as Affinidi Login and ID to affinidiLoginMain.

  1. Open the MasterPage.js and add an onClick event handler for the buttons and hides it when the user is logged-in using the below code:
import { getAuthUrl } from 'public/affinidi/client.js';
import wixLocationFrontend from 'wix-location-frontend';
import wixUsers from 'wix-users';

$w.onReady(function () {
	if(wixUsers.currentUser.loggedIn) {
		$w('#affinidiLoginMain').hide();
	}
});

export async function affinidiLoginMain_click(event) {
  $w('#affinidiLoginMain').disable();
	console.log('Header, Affinidi Login button clicked');
  try {
      const url = await getAuthUrl();
      wixLocationFrontend.to(url);

  } catch (error) {
      console.error(error);
  }
	$w('#affinidiLoginMain').enable();
}
Wix Home Page

Publish and Try it

Once all the changes are saved, publish the site.

Open your Wix site and click the Affinidi Login button on the Signup or Login form. It will trigger the authentication flow and request your consent to share your Email Address from your Affinidi Vault.

Affinidi Login Wix Signup
Affinidi Login Wix Login