openpanel/packages/live-previews/src/scope/auth0.tsx

import * as Auth0ReactScope from "@auth0/auth0-react";
import React from "react";
import { ExternalNavigationContext } from "./common";

const Auth0Context = React.createContext<{
  isLoading: boolean;
  user?: {
    picture: string;
    name: string;
    email: string;
  };
  logout: () => void;
  getIdTokenClaims: () => { __raw: string } | undefined;
  loginWithRedirect: () => void;
}>({
  isLoading: false,
  user: undefined,
  logout: () => undefined,
  getIdTokenClaims: () => undefined,
  loginWithRedirect: () => undefined,
});

const Auth0Provider = ({ children }: { children: React.ReactNode }) => {
  const externalNavigator = React.useContext(ExternalNavigationContext);

  const [isAuthenticated, setIsAuthenticated] = React.useState(false);

  return (
    <Auth0Context.Provider
      value={{
        isLoading: false,
        user: isAuthenticated
          ? {
              picture: "",
              name: "John Doe",
              email: "example@example.com",
            }
          : undefined,
        logout: () => {
          if (isAuthenticated) {
            setIsAuthenticated(false);

            externalNavigator.go({ to: "/login", type: "replace" });
          }
        },
        getIdTokenClaims: () => {
          if (isAuthenticated) {
            return { __raw: "dummy-token" };
          }

          return undefined;
        },
        loginWithRedirect: () => {
          if (isAuthenticated) return;

          setIsAuthenticated(true);

          externalNavigator.go({ to: "/", type: "replace" });
        },
      }}
    >
      {children}
    </Auth0Context.Provider>
  );
};

const useAuth0 = () => {
  const context = React.useContext(Auth0Context);

  if (context === undefined) {
    throw new Error("useAuth0 must be used within a Auth0Provider");
  }

  return context;
};

const Auth0Scope = {
  Auth0ReactScope: {
    ...Auth0ReactScope,
    useAuth0,
    Auth0Provider,
  },
};

export default Auth0Scope;