Logging in to Wix website using Xbox or Microsoft

Question

I'm using a Wix site with the Velo extension (access to the site's JavaScript code). Since I'm an Xbox licensed developer and work with Azure (Entra ID), I'd like to know if there's a way to add Xbox or Microsoft sign-in to the site? If so, how can this be done?

If that's not possible, is there any way to link the data in any way so that a new user is created in the Azure Directory with the data from the Wix user partition?

Answer 1

It is possible. Although Wix doesn't natively support it, you can use OAuth 2.0 to integrate your Web App with Entra ID.

You'll need a suitable role in Entra, such as Application Administrator, because you'll need to register an application and create a service principal for the application in order to be able to authorise your application to interact with the directory, and to grant it permissions to read the user's profile, and whatever else you want the app to be able to do.

I'll put a code sample below, but you should really understand the how this works. Invest the time in to reading through the below, because it will likely save you time setting it up.

OAuth 2.0 Authorization with Entra ID

Backend Code for OAuth Flow

// Backend file: backend/oauth.jsw
import {fetch} from 'wix-fetch';

const clientId = 'YOUR_CLIENT_ID';
const clientSecret = 'YOUR_CLIENT_SECRET';
const tenantId = 'YOUR_TENANT_ID';
const redirectUri = 'https://your-wix-site.com/callback';

export async function getAzureAdLoginUrl() {
    const authUrl = `https://login.microsoftonline.com/${tenantId}/oauth2/v2.0/authorize?client_id=${clientId}&response_type=code&redirect_uri=${redirectUri}&response_mode=query&scope=openid profile email User.Read&state=12345`;
    return authUrl;
}

export async function handleAzureAdCallback(code) {
    const tokenUrl = `https://login.microsoftonline.com/${tenantId}/oauth2/v2.0/token`;
    const body = `client_id=${clientId}&scope=openid profile email User.Read&code=${code}&redirect_uri=${redirectUri}&grant_type=authorization_code&client_secret=${clientSecret}`;

    const response = await fetch(tokenUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: body
    });

    const result = await response.json();
    return result;
}

Frontend Code to Trigger Login

// Frontend file: public/login.js
import {getAzureAdLoginUrl} from 'backend/oauth';

$w.onReady(async function () {
    const loginButton = $w('#loginButton');
    
    loginButton.onClick(async () => {
        const loginUrl = await getAzureAdLoginUrl();
        window.location.href = loginUrl;
    });
});

Callback Page Example

// Frontend file: public/callback.js
import {handleAzureAdCallback} from 'backend/oauth';

$w.onReady(async function () {
    const urlParams = new URLSearchParams(window.location.search);
    const code = urlParams.get('code');

    if (code) {
        const result = await handleAzureAdCallback(code);
        console.log('Access Token:', result.access_token);
        
        // Use the token to fetch user info and handle the login process
    }
});

The consts you need to populate in the backend you will get during the process of registering your application in Azure AD, and your callback URI is simply a page the user is redirected to of your website after they've logged in.