How do I use Xana facebook oauth?

[Walds]

Hi, I’m new to weweb.io and I just wanted to know how I can add a log-in feature using facebook using Xana facebook oauth.
We already have our api set-up with /oauth/facebook/init and /oauth/facebook/continue

[Walds]

UPDATE: I already figured it out and I’ll share my experience with every one who might need this info.

DISCLAIMER: This is not the best solution out there, so please send a reply if there’s an easier approach

1. Create a button which you can label with something like “Continue with Facebook” or any other oauth that you’re using.

2. Make sure to give it an ID so you could use it in your script for later.
   

3. Go to your page settings then paste your script on the custom code => Body section.
   

   

I used this script to be exact:
NOTE: Make sure to insert script tags () since the custom code section is HTML

var login_path = "/login";
var redirect_uri = "https://your-desired-redirection-page.here";
var xano_oauth_init_url = "Your OAuth Init URL here";
var xano_oauth_continue_url = "Your OAuth Continue URL here";
var formHeaders = [];
var formResponse = [];

var authState = false;

//initialize the authentication API

function initOauth() {
    var fetchURL = new URL(xano_oauth_init_url);
    fetchURL.searchParams.set("redirect_uri", redirect_uri);
    fetchURL = fetchURL.toString();

    fetch(fetchURL, {

            headers: formHeaders,
            method: "GET"

        })

        .then(res => res.json())
        .then(data => formResponse = data)
        .then(() => loginResponse(formResponse))

        .catch((error) => {
            console.error('Error:', error);
            //responsePanel('error')
        });

}

//after initialization, go to the retrieved url

function loginResponse(res) {
    window.location.href = res;
}

//button for intializing the authentication api
var authButton = document.querySelector("#authButton");
if (authButton) {
  authButton.addEventListener("click", (event) => {
    initOauth();
  });
}

var logoutButton = document.querySelector("#logout");
if (logoutButton) {
  logoutButton.addEventListener("click", (event) => {
    logout();
  });
}

//on page load, parse the code variable to be able to login/signup

window.onload = function() {
    var curUrl = new URL(document.location.href);
    var code = curUrl.searchParams.get("code");
    if (code) {
      continueOauth(code)
    } else {
      var token = window.localStorage.getItem('auth');
      if (token) {
        token = JSON.parse(token);
        if (token) {
          updateAuthState(token);
        }
      }

      if (!token && curUrl.pathname.indexOf('myaccount') !== -1) {
        document.location.href = login_path;
      }
    }
}

//when code is available attempt to login/signup. make sure to include

function continueOauth(code) {
    var fetchURL = new URL(xano_oauth_continue_url);
    fetchURL.searchParams.set("redirect_uri", redirect_uri);
    fetchURL.searchParams.set("code", code);
    fetchURL = fetchURL.toString();
    var newUrl = new URL(document.location.href);
    newUrl.searchParams.delete("code");
    newUrl.searchParams.delete("scope");
    newUrl.searchParams.delete("authuser");
    newUrl.searchParams.delete("hd");
    newUrl.searchParams.delete("prompt");
    history.replaceState(null, "", newUrl.toString());

    fetch(fetchURL, {

            headers: formHeaders,
            method: "GET"

        })

        .then(res => res.json())
        .then(data => formResponse = data)
        .then(() => saveToken(formResponse))
        .catch((error) => {
            console.error('Error:', error);

        });

}

//save the generated token in the local storage as a cookie
function saveToken(res) {               
    window.localStorage.setItem('auth', JSON.stringify(res));
    updateAuthState(res);
}

function updateAuthState(res) {
  alert("Hi " + res.name);
  authState = res;

  updateElement("#name", res.name);
}

function updateElement(id, value) {
  var el = document.querySelector(id);
  if (el) {
    el.innerHTML = value;
  }
}

function logout() {
  window.localStorage.removeItem('auth');
  window.location.reload();
}

[Joyce]

Ooooh this is awesome! Thanks so much for sharing!

I was just about to reply that it’s not possible yet using the Xano Auth plugin.