Implementing a custom login page in React using auth0-js-spa

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
<script src=""></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"),

  var webAuth = new auth0.WebAuth(params);
  var button = document.getElementById("login");
  button.addEventListener("click", function (e) {
    webAuth.authorize({ connection: "google-oauth2" });

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?