拡張機能フレームワークWXTでのPopupの作り方

import { postAuth } from "@/utils/auth";
import React, { useContext, useEffect, useState } from "react";
import type { ReactNode } from "react";
// chromeのstorage APIのラッパー
import { storageIsLogin } from "@/utils/storage";

// 型やContextの定義
type LoginState = "fetching" | "loggedIn" | "loggedOut";
export class AuthFailedError extends Error {
  public constructor() {
    super();
    this.name = "AuthFailedError";
  }
}
export type AuthUserContextType = {
  loginState: LoginState;
  login: (
    username: string,
    password: string,
    callback: () => void,
  ) => Promise<void>;
  logout: (callback: () => void) => Promise<void>;
};

const AuthUserContext = React.createContext<AuthUserContextType>(
  {} as AuthUserContextType,
);

type Props = {
  children: ReactNode;
};

// コンポーネント本体
export default function AuthUser({ children }: Props) {
  // ログイン状態を取得するまでは`fetching`とする
  const [loginState, setLoginState] = useState<LoginState>("fetching");

  // ログイン状態を取得して反映
  useEffect(() => {
    async function setFromStorage() {
      const isLogin = await storageIsLogin.getValue();
      if (isLogin) {
        setLoginState("loggedIn");
      } else {
        setLoginState("loggedOut");
      }
    }
    setFromStorage();
  }, []);

  // ログインとその状態管理
  const login: AuthUserContextType["login"] = async (
    username: string,
    password: string,
    callback: () => void,
  ) => {
    // 実際にログインする
    const isSuccess = await postAuth(username, password);
    if (!isSuccess) {
      throw new AuthFailedError();
    }
    setLoginState("loggedIn");
    await storageIsLogin.setValue(true);
    // callbackによりログイン後に必要に応じた処理を実行
    callback();
  };

  // ログアウト時の状態管理
  const logout: AuthUserContextType["logout"] = async (
    callback: () => void,
  ) => {
    setLoginState("loggedOut");
    await storageIsLogin.setValue(false);
    callback();
  };

  const value: AuthUserContextType = { loginState, login, logout };
  return (
    <AuthUserContext.Provider value={value}>
      {children}
    </AuthUserContext.Provider>
  );
}

// contextを取り出すときに使用する
export function useAuthUserContext(): AuthUserContextType {
  return useContext<AuthUserContextType>(AuthUserContext);
}

import { Outlet } from "react-router-dom";

export default function Layout() {
  return (
    <>
      <div>header</div>
      <Outlet />
      <div>footer</div>
    </>
  );
}

<Route path="/" element={<Layout />}>
  <Route path="/login" element={<Login />} />
</Route>

<>
  <div>header</div>
  <Login />
  <div>footer</div>
</>

import { useEffect } from "react";
import { type SubmitHandler, useForm } from "react-hook-form";
import { useNavigate } from "react-router-dom";
import { AuthFailedError, useAuthUserContext } from "../auth/AuthUser";

type Inputs = {
  username: string;
  password: string;
};

export default function Login() {
  const navigate = useNavigate();
  const authUser = useAuthUserContext();
  const { handleSubmit, setError, formState: { errors }, } = useForm<Inputs>();

  useEffect(() => {
    if (authUser.loginState === "loggedIn") {
      navigate("/");
    }
  }, [authUser.loginState]);

  const onSubmit: SubmitHandler<Inputs> = async (data) => {
    const username = data.username;
    const password = data.password;
    try {
      await authUser.login(username, password, () => {
        navigate("/");
      });
    } catch (e) {
      if (e instanceof AuthFailedError) {
        setError("root.auth", { type: "authError" });
      }
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} >
      入力欄など
      <button type="submit" >
        ログイン
      </button>
    </form>
  );
}