Getting Auth0 to work with Webflow!

katedev

Hi all!

Xano support pointed me at a Youtube video for hooking up oauth2 (Google) and said to follow this to achieve the same for Auth0. No luck getting this to work so far and hoping someone eagle eyed can spot the issue. Also happy to pay to resolve!

For Auth0, I added the myaccount URL on Webflow in the callback URL section.

Here is the JS added to Webflow. Thank you!

<script>
var login_path = "/base/login"
var redirect_uri = "https://markets-waitlist-v2.webflow.io/base/myaccount"
var xano_oauth_init_url = "https://x8ki-letl-twmt.n7.xano.io/api:K5672CH6/oauth/auth0/init"
var xano_oauth_continue_url = "https://x8ki-letl-twmt.n7.xano.io/api:K5672CH6/oauth/auth0/continue"
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.authUrl
}

//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);
updateElement("#email", res.email);
}

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

function logout() {
window.localStorage.removeItem('auth');
window.location.reload();
}
</script>

Ray Deck

There are three parts to the oauth flow:

1) A button with a URL that basically redirects you to the other service (including Auth0) that pops up and asks you to authenticate with them. That service uses the "redirect url" to send you back to your app (2).

2) A page (could be the same login page) that looks at the URL to see if it received an authentication "code". If it did, collect that code and upload it to (3).

3) A back-end endpoint that vaidates that code with the authentication service by sending a payload that includes both the code ,the url and a client secret that the backend knows about and the front end does not. If all this works, the auth service returns an ID token that you can then say "yes that's my person", and then use that information to generate a Xano access token for that person. This token gets sent back to the front end (4)

4) After getting the data (the token) back, save the token to either cookies or localStorage (you're using localstorage, which is great and easy to use) so it works from page to page.. Then redirect your user to the authenticated part of your site (5)

5) On the authenticated part of your site, use authenticated calls to Xano - using either the Xano JS library or making fetch requests that merge your now-saved auth token into an "Authentication" header that says "Bearer " followed by the token. Those requests will get validated on your back end and away you go.

I illustrate the above because it's not simple, but it's not infinite - it's just work. It's also the kind of work we do together in the State Change Pro group because authentication is definitely part of the hardest 5% for many projects.