lejonmanen/auth_config.json

## auth_config.json
"Ersätt den här texten med domain och clientId från appens inställningar i Auth0"

## index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
	<meta charset="utf-8">
	<title> Auth0 example </title>
	<script src="https://cdn.auth0.com/js/auth0-spa-js/2.0/auth0-spa-js.production.js"></script>
 	<script type="module" src="script.js" defer></script>
</head>
<body>
	<h1> Auth0 example </h1>
	<a href="."> Reload </a>
	<button id="btn1" disabled> Auth kom igen </button>
	<p id="status">
		Status
	</p>
	<img src="" alt="user profile" />

	<button type="button" id="loginBtn"> Logga in </button>
	<button type="button" id="logoutBtn"> Logga ut </button>
</body>
</html>

## script.js
const fetchAuthConfig = () => fetch("./auth_config.json");

const btn1 = document.querySelector('#btn1')
const status = document.querySelector('#status')
let auth0Client
const loginBtn = document.querySelector("#loginBtn")
const logoutBtn = document.querySelector("#logoutBtn")
const img = document.querySelector("img")

const configureClient = async () => {
	const response = await fetchAuthConfig();
	const config = await response.json();

	auth0Client = await auth0.createAuth0Client({
		domain: config.domain,
		clientId: config.clientId
	});

	btn1.disabled = false
};

const updateUI = async () => {
	const isAuthenticated = await auth0Client.isAuthenticated();

	loginBtn.disabled = isAuthenticated;
	document.querySelector("#logoutBtn").disabled = !isAuthenticated;
	status.innerHTML = `You are ${isAuthenticated ? '' : 'NOT'} authenticated.`
	console.log('okay ', auth0Client);
	if( isAuthenticated ) {
		status.innerHTML += ' <br/> '
		let user = await auth0Client.getUser()
		let x = JSON.stringify(user)
		status.innerHTML += x
		img.src = user.picture
	}

};

const doLogin = async () => {
	await auth0Client.loginWithRedirect({
		authorizationParams: {
			redirect_uri: window.location.origin
		}
	});
};
const doLogout = () => {
	auth0Client.logout({
		logoutParams: {
			returnTo: window.location.origin
		}
	});
};

loginBtn.addEventListener('click', doLogin)
logoutBtn.addEventListener('click', doLogout)


await configureClient()
updateUI()

const query = window.location.search;
if (query.includes("code=") && query.includes("state=")) {
	// Process the login state
	await auth0Client.handleRedirectCallback();

	updateUI();

	// Use replaceState to redirect the user away and remove the querystring parameters
	window.history.replaceState({}, document.title, "/");
}
	<!DOCTYPE html>
	<html lang="en" dir="ltr">
	<head>
	<meta charset="utf-8">
	<title> Auth0 example </title>
	<script src="https://cdn.auth0.com/js/auth0-spa-js/2.0/auth0-spa-js.production.js"></script>
	<script type="module" src="script.js" defer></script>
	</head>
	<body>
	<h1> Auth0 example </h1>
	<a href="."> Reload </a>
	<button id="btn1" disabled> Auth kom igen </button>
	<p id="status">
	Status
	</p>
	<img src="" alt="user profile" />

	<button type="button" id="loginBtn"> Logga in </button>
	<button type="button" id="logoutBtn"> Logga ut </button>
	</body>
	</html>
	const fetchAuthConfig = () => fetch("./auth_config.json");

	const btn1 = document.querySelector('#btn1')
	const status = document.querySelector('#status')
	let auth0Client
	const loginBtn = document.querySelector("#loginBtn")
	const logoutBtn = document.querySelector("#logoutBtn")
	const img = document.querySelector("img")

	const configureClient = async () => {
	const response = await fetchAuthConfig();
	const config = await response.json();

	auth0Client = await auth0.createAuth0Client({
	domain: config.domain,
	clientId: config.clientId
	});

	btn1.disabled = false
	};

	const updateUI = async () => {
	const isAuthenticated = await auth0Client.isAuthenticated();

	loginBtn.disabled = isAuthenticated;
	document.querySelector("#logoutBtn").disabled = !isAuthenticated;
	status.innerHTML = `You are ${isAuthenticated ? '' : 'NOT'} authenticated.`
	console.log('okay ', auth0Client);
	if( isAuthenticated ) {
	status.innerHTML += ' <br/> '
	let user = await auth0Client.getUser()
	let x = JSON.stringify(user)
	status.innerHTML += x
	img.src = user.picture
	}

	};

	const doLogin = async () => {
	await auth0Client.loginWithRedirect({
	authorizationParams: {
	redirect_uri: window.location.origin
	}
	});
	};
	const doLogout = () => {
	auth0Client.logout({
	logoutParams: {
	returnTo: window.location.origin
	}
	});
	};

	loginBtn.addEventListener('click', doLogin)
	logoutBtn.addEventListener('click', doLogout)


	await configureClient()
	updateUI()

	const query = window.location.search;
	if (query.includes("code=") && query.includes("state=")) {
	// Process the login state
	await auth0Client.handleRedirectCallback();

	updateUI();

	// Use replaceState to redirect the user away and remove the querystring parameters
	window.history.replaceState({}, document.title, "/");
	}