How to use Firebase Authentication with Wized & Xano

Integrating Firebase Authentication in your Wized/Xano build can streamline user management and security across your app, and make your life easier when developing social oauth, such as Google, Microsoft, and Apple. By following this step-by-step guide, you'll ensure that user sign-ups and logins are handled smoothly, with users properly authenticated and stored across both Firebase and Xano platforms. This will allow you to use the native Xano API authentication while outsourcing the authentication process to Firebase.

‍

Demo

‍

Set-up

In Firebase

1. Go to console.firebase.google.com and create a project

‍

2. Enable Authentication

‍

3. Add Providers

If you are enabling the Microsoft Provider, you can follow this official tutorial.

At the time of writing, these are the steps:

• Create a Microsoft account and log in at https://entra.microsoft.com
• Go to Identity ➝ Applications ➝ App registrations

• For Supported account types, select depending on the application. Multitenant means that any microsoft account can register or log in.
• For redirect uri, copy the one from Firebase

• Copy the Application ID to Firebase

• Go to Certificates & Secrets

• Please note that it has an expiration date, so you will need o change it at some point. You can select 12 months for the expiration

‍

4. Create a web project

Once created, click continue to dashboard

‍

In Xano

1. Create a database with 1 item

‍

2. Create a task that runs daily, retrieves the latest Google certificate, and stores it to the database.

Fetch the following endpoint https://www.googleapis.com/robot/v1/metadata/x509/[email protected] to retrieve the Google certificate. This X.509 certificate is used to securely authenticate and establish communications between Google's cloud services. We will use it to decode the token coming from Firebase.

‍

3. Create an endpoint which receives the Firebase token and exchanges it for a Xano token

This logic creates a user if it doesn't already exists in the database or just returns the auth token if the user already exists.

Create a Firebase folder to keep this organized.

‍

In Webflow

1. Create the login form

• Add a wized attribute to it so we can target it later.
• Give the inputs clear names
• Add attributes to the auth options as well.
  • As Wized doesn't currently support other options than Google, we will need to create some custom logic for other providers than Google.

• Add a login error

Hide it using CSS, from the global site settings.

2. Create the sign up form

• Give it Wized attributes
• Add clear naming on inputs
• You can use the same Wized attributes for the social buttons as on the login form

‍

3. Create the Forgot Password form

‍

In Wized

1. Add Firebase App

Go back to the Firebase project > Project settingScroll down until you find the apps section.

• Scroll down until you find the apps section.
• Copy the api key and app id to Wized.

2. Add Xano App

You can find the base url by going to the created endpoint and copying the endpoint url, and then removing the /firebase/init from the end.

‍

3. Create a Xano Firebase Init Request

Create a fb_token variable. This will store the token received from firebase. We use a variable to make the request more reusable.

‍

4. Create the Firebase Auth requests

‍

5. Create the Sign up logic

Listen for the form submit event and trigger the firebase sign up with email and password request.

‍

Listen for the successful authentication event and trigger the xano firebase init endpoint.

‍

Handle errors

• For better looking errors, you should write custom messages for each error type. A full list of codes can be found here: https://firebase.google.com/docs/auth/admin/errors

‍

6. Create the login logic

Listen for the form submit event and trigger the Firebase sign in with email and password request.

‍

After the Firebase sign in with email and password event, check if it was successful and trigger the firebase init.

‍

Handle errors

‍

7. Create the Google auth logic

This is common for both the login and the signup pages. It will login the user if it exists or create the user if it doesn't.

‍

After the Google Auth, check if it was successful.

‍

Debugging and seeing the Google response.

• Create a debug element in Webflow

Create some logic to listen for the event and inject the response data.

‍

8. Redirect after success

If you want to redirect the user after the login or sign up was successful, run some logic after the xano firebase init request.

‍

9. Handling Custom Providers

Wized currently has a limited list of providers.

If you need to use a different one, you would need to write custom JS to extend the Wized logic.

‍

9.1 Clone the Finsweet Developer Starter

https://github.com/finsweet/developer-starter

‍

9.2 Install the Firebase npm package

npm install firebase

‍

9.3 Create a firebase.ts file in the utils folder

Go to Firebase > project settings and copy the code into it

Add export in front of the const app =

‍

9.4 Create a handleMicrosoftAuth.ts file

This will handle the Microsoft provider logic.

import { getAuth, OAuthProvider, signInWithPopup } from 'firebase/auth';

import { app } from '$utils/firebase';

const handleMicrosoftAuth = async () => {
  try {
    const auth = getAuth(app);
    const microsoftProvider = new OAuthProvider('microsoft.com');

    const result = await signInWithPopup(auth, microsoftProvider);
    const credential = OAuthProvider.credentialFromResult(result);

    if (!credential) return;
    const { user } = result;

    // Using await to wait for getIdToken to resolve
    const token = await user.getIdToken();

    return token;
  } catch (error) {
    // Handle any errors that occurred during signInWithPopup or getIdToken
    // Optionally, rethrow the error or handle it as per your application's error handling policy
  }
};

‍

9.5 Add this logic to the login and signup pages

• Create an auth.ts file

import handleMicrosoftAuth from '$utils/firebase/handleMicrosoftAuth';

window.Wized = window.Wized || [];
// eslint-disable-next-line @typescript-eslint/no-explicit-any
window.Wized.push((Wized: any) => {
  const microsoftBtn = document.querySelector('[wized="auth_microsoft"]') as HTMLElement;

  if (microsoftBtn) {
    microsoftBtn.addEventListener('click', async () => {
      const token = await handleMicrosoftAuth();

      if (token) {
        Wized.data.v.fb_token = token;
        Wized.requests.execute('xano_firebase_init');
      }
    });
  }
});

‍

9.6 Get rid of the TS issues

In utils create a types folder. Add a custom-window.d.ts file in it.

type WizedFunction = (callback: (Wized) => void) => void;

interface Window {
  Wized?: WizedFunction[];
}

declare global {
  interface Window {
    Wized?: WizedFunction[];
  }
}

‍

9.7 Add the auth.ts file to the build.js

‍

9.8 Test locally

If you want to test it locally, run pnpm run dev in the console. Copy the script to Webflow, on the login and signup pages.

‍

9.8 Deploy

For deployment, you can use a platform like jsdelivr, cloudflare pages, or vercel.

‍

We use Cloudflare pages at PixelMakers.

‍

To deploy on Cloudflare pages:

• Create a GitHub repository and push the changes.

Run the following commands in the VS Code terminal (the instructions from github, with . instead of readme at git add)

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin [github url]
git push -u origin main

‍

If you receive an origin error, run the following command and then rerun the commands above

git remote rm origin

‍

Go to cloudflare.com ➝ workers & pages ➝ create application

Select pages

Connect to git and add your github account

Add the following settings. For NODE_VERSION, go to nodejs.org and add the latest LTS version

• After, click save and deploy
• After it was successful, click continue

‍

Click on visit site

To test if the build was ok, add /auth.js at the end. If you see some code, it was ok.

Go to Webflow and replace the script src with the deployed link