🍚

remix-authをv4にアップデートする

2024/11/30に公開

 はじめにremix-authの v4 がリリースされました！

結構仕様が変わっているので、v4 にアップデートしていこうと思います！

合わせてremix-auth-formも v3 にアップデートしていきます！

 変わったところ以下でremix-authとremix-auth-formの大きなアップデート内容を軽く解説します。

翻訳しつつなので、意訳がありましたらすいません。。。

 remix-auth使用されていたライブラリが簡素になりました（こちら）。

それのよって、以下の機能はすべて削除されました。
logout メソッド
Strategy のfailure,successメソッド

failureRedirect,successRedirectメソッド
これによって authenticate メソッドはユーザーデータを返すかエラーを返すかになったので、処理が簡素になりました。
それと Remix-v2 から React Router v7 へのアップグレードも行われました（こちら）。

 remix-auth-formremix-auth v4 に対応しました（こちら）。

 現在のバージョンremix-authとremix-auth-formのアップデート前のバージョンはこちらです。（remix-auth-formはだいぶ放置していました 😅）
 package.json
{
    "remix-auth": "^3.7.0",
    "remix-auth-form": "^1.5.0",
}

 アップデート手順remix-authの README を参考にアップデートしていきます。
!今回はこちらの記事をベースに修正していきます。

よければこちらの記事もご覧ください。

https://zenn.dev/kyrice2525/articles/article_tech_011
以下のコマンドを入力して、remix-authとremix-auth-formをアップデートします。
npm install remix-auth@latest remix-auth-form@latest
アップデート後のバージョンはこちらです。
 package.json
 {
     "remix-auth": "^4.0.0",
     "remix-auth-form": "^3.0.0",
 }
auth.server.tsに記載していた内容をすべて削除し、以下のように書き換えます。
auth.server.ts
import { Authenticator } from "remix-auth";
import { FormStrategy } from "remix-auth-form";
import { login } from "./login.server";

export let authenticator = new Authenticator<User | null>();

authenticator.use(
new FormStrategy(async ({ form }) => {
    let email = form.get("email");
    let password = form.get("password");
    // ログイン処理
    let user = await login(String(email), String(password));
    return user;
}),
"user-login"
);
ログイン画面でのログイン処理を修正します。
app/routes/_index.tsx
import { authenticator } from "~/services/auth.server";
import { ActionFunctionArgs, LoaderFunctionArgs, redirect } from "@remix-run/node";
import { commitSession, getSession } from "~/services/session.server";

export const action = async ({ request }: ActionFunctionArgs) => {
const user = await authenticator.authenticate("user-login", request);
const session = await getSession(request.headers.get("cookie"));
session.set("user", user);

return redirect("/success", { headers: { "Set-Cookie": await commitSession(session) } });
}
ログアウト処理を修正します。
app/routes/logout/index.tsx
import { ActionFunctionArgs } from "@remix-run/node";
import { redirect } from "@remix-run/react";
import { destroySession, getSession } from "~/services/session.server";

export const loader = async () => {
return redirect("/");
};

export const action = async ({ request }: ActionFunctionArgs) => {
const session = await getSession(request.headers.get("cookie"));
return redirect("/", { headers: { "Set-Cookie": await destroySession(session) } });
};
ルートを保護している処理を修正します。
ログインに成功すると success 画面に遷移しますが、ログインしていない状態で sccess 画面には遷移できないようにしなければなりません。

そこで app/routes/success/index.tsx の SuccessIndex()の外側に以下の処理を追加します。
app/routes/success/index.tsx
import { redirect } from "@remix-run/node";
import { getSession } from "~/services/session.server";

 export const loader = async ({ request }: LoaderFunctionArgs) => {
 const session = await getSession(request.headers.get("cookie"));
 const user = session.get("user");
 if (!user) return redirect("/");
 return null;
 };

 最後にremix-authとremix-auth-formをアップデートし、コードを修正しました！

この記事が誰かの助けになれば幸いです！🙇‍♂️

はじめに

変わったところ

remix-auth

remix-auth-form

現在のバージョン

アップデート手順

最後に

Discussion