Is it possible to create a custom login interface when using the auth0-js-spa library?
FYI: I’m using the official auth0-js-spa React starter as a starting point.
So at first I created a custom login form using a custom Univesal Login template. I’m going to keep this example simple.
I got this working with the following code:
<button id="login">
Google login
</button>
<script src="https://cdn.auth0.com/js/auth0/9.13/auth0.min.js"></script>
<script>
var config = JSON.parse(decodeURIComponent(escape(window.atob("@@config@@"))));
var params = Object.assign(
{
configurationBaseUrl: config.clientConfigurationBaseUrl,
domain: config.auth0Domain,
clientID: config.clientID,
redirectUri: config.callbackURL,
responseType: (config.internalOptions || {}).response_type || (config.callbackOnLocationHash ? "token" : "code"),
},
config.internalOptions
);
var webAuth = new auth0.WebAuth(params);
var button = document.getElementById("login");
button.addEventListener("click", function (e) {
e.preventDefault();
webAuth.authorize({ connection: "google-oauth2" });
});
</script>
When the button is clicked, the login is triggered and the application invokes the handleRedirectCallback.
What I want to do now is to do the same in my application.
So I made a login page:
import * as auth0 from "auth0-js";
import config from "../auth_config.json";
const webAuth = new auth0.WebAuth({
clientID: config.clientId,
domain: config.domain,
redirectUri: config.redirectUri,
responseType: "token",
});
export const Login = () => {
const handleLogin = () => {
webAuth.authorize({ connection: "google-oauth2" });
};
return <button onClick={() => handleLogin()}>Google login</button>;
};
The problem now is that the SPA package doesn’t know about the login and sets isAuthenticated to false.
Is there any way to make this approach work? Or should I just ditch the SPA package and implement everything manually via the normal auth0 package?