Four Keysを測定するサイトを作る 3（PlaywrightでGitHubLoginはできないのでメアドでログイン、RHFを使う、テストでSupabaseクライアントを使ったログアウトをしない）
saneatsu【2025-02-28】PlaywrightのテストでGitHub Loginをしたい
背景
ログインしている状態 or Notの状態でリダイレクトのテストをしたく、Playwrightでやってみる。
前にPlaywrightでGoogle Authログインをしようとしたら、Bot判定をくらってしまったので test/.auth/user.json にクッキー情報を直接いれることで擬似的にログイン状態を再現したのでその方法を今回もやってみる。
ref: https://playwright.dev/docs/auth
問題発生
SupabaseでGitHubログインをするとCookieに sb-<ProjectId>-auth-token.0 と sb-<ProjectId>-auth-token.1 という値が入る。
これを test/.auth/user.json に入れればできるのでは？と思ったがこの値は毎回変わるのでログインできない。GitHubのWebページにアクセスすればいいかとも思ったが2段階認証を突破できない。
回避方法
単にログイン状態を保持したいならGitHub Authログインじゃなくて、メアドとパスワードでログインするようにしようかな。。
どうせそのログイン方法も実装する予定ではあったし。
saneatsu【2025-03-02】EmailでSignupしてもメールが届かない
背景
公式サイト見ながらEmail、PasswordでのSignup機能を追加したがどうにもこうにもメールが届かない。
ここも見たがどうも違いそう
原因
色々なサイトを見ながら以下のような画像があった。
自分も確認したらすでにユーザーは登録されているが、ProviderがGitHubになっていた。
つまり、すでにGitHubの認証を使ったログインをしているメールアドレスを使ってSignupをしていたのでメールが届かなかった。
実際にGitHubで使用していないメアドを使ったらすぐにメールが届いた。迷惑メールのフォルダにも入っていなかった。
本来DBなのかどっかを参照して、そのメールアドレスはすでに登録されていますよ、というハンドリングを行うべきなんだろうな。
その他
背景でも参考にした記事だけど、確認メールは1時間あたり3通しか送れないようなのでSMTPサーバーを設定したほうが良さそう。
SMTPサーバーの設定についての公式ドキュメント。Resendを使おうかな。
saneatsu【2025-02-28】バリデーション何使うか問題
背景
始めに書いたようにZodではなく軽量なValibotを使いたい。
その場合フォーム周りはReact Hook FormかConformを使いたい。
これはどちらも使ったことあるので正直どっちでもいい。
それぞれの特徴
React Hook Form
Server Actionと連携できるのがConformの強みだが、React Hook FormもBeta版ではあるものの可能になっている。
また、shadcn/uiのFormコンポーネントでは内部でReact Hook Formを使っているので親和性◯。
と思ったがFormコンポーネントを追加するとZodも入ってきてしまう。
Form validation using zod.
って書いてるじゃん。
ん〜Zodから離れたい。
Conform
使いやすいので気に入っている。
conform-to-zodは公式であるが、conform-to-valibotは日本人のちまめさんが作ったものがある。
結論
自分が以前作ったRemixのアプリを見たらForm周りはshadcn/uiを使わずに自作していた。
ということでshadcn/uiとの親和性とか考えなくていいや。
Beta版で鋭意開発中だと思われるReact Hook Formを使う。
saneatsuエラー
VitestでtoBeInTheDocument を使うと以下のエラーが出てくる。
Property 'toBeInTheDocument' does not exist on type 'Assertion<HTMLElement>'.
解決方法
pnpm add -D @testing-library/jest-dom
+ import "@testing-library/jest-dom/vitest"; // これを追加するだけ
【2025-03-02】Tailwindのinvertを使ってSVGの白黒を反転させる
GitHubのアイコンをLight/Darkモードで反転してほしいな〜と思ったけどinvertっていうクラスがあるのか。
何気初めて使った。
<Image
src={githubSvg}
alt="GitHub Icon"
width={24}
height={24}
className="invert dark:invert-0"
/>
saneatsu【2025-03-03】PlaywrightでSupabaseクライアントを使ってサインアウトするときは注意が必要
背景
ミドルウェア周りのリダイレクトのてすと（middleware.spec.ts）と、ヘッダーのテストを書いていた（Header.spec.ts）。
はじめにかいたmiddleware.spec.tsは問題なく動いていたのにHeader.spec.tsのテストを追加してからmiddleware.spec.tsも落ちてしまう。
落ちるのはログイン状態が絡んでいるテストだった。
結論
テストの中でサインアウトボタンを押して、それによってSupabaseのクライアントによってサインアウトしていることが問題だった。具体的には以下のsignOut()を実行してしまっていた。
それによってログアウトされた判定になり他のテストも落ちてしまっていた。
"use server";
import { redirect } from "next/navigation";
import { createServerClient } from "@/lib/supabase/server";
export async function signOut() {
const supabase = await createServerClient();
const { error } = await supabase.auth.signOut();
if (error) {
throw new Error("Failed to sign out");
}
redirect("/login");
}
ということでCookieを削除するなどをしてサインアウトを実現しておく。