【React＋Typesprict＋Next.js】ログイン認証実装の際のメモ

furai_mountain 2022/02/18に更新

まずはuseContextで実装する方法を試してみた。
簡単にできた。

参考

furai_mountain 2022/02/18に更新

しかしやはりnext-authを使って実装することにした。

色々調べて出てくる記事を参考にしていたが、next-authのバージョン違いらしくエラーが出るため、

で適用方法を確認しながら実装

結局以下のサイトを実践しながら、いいとこ取りで実装
とりあえずログインまではできた

参考にさせていただいたサイト

https://youtu.be/im8o328q6EI
これ見ながらやればひととおり実装できる

英語だけど翻訳すればとてもわかり易い
結局このサイトをかなり参考にした

SessionProvider、session，callbacksなどの説明が詳しい

furai_mountain 2022/02/17に更新

.envの記述は必要なのだろうか？
これ消したらsessionがすぐ切れなくなった気がする

→　本番環境ではいるみたい　secretも

.env

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=test

↑testの部分は↓で生成した乱数を設定する

$ openssl rand -base64 32

参考

furai_mountain 2022/02/17に更新

signout時に、”Are you sure you want to sign out?”と聞かれるページを挟むのをスキップする

解決策
[...nextauth].tsのcallbacksにsignOut時に飛ばすページを記述しておく

[...nextauth].ts

callbacks: {

  pages: {
    signIn: "/",
    signOut: "/",
  },
}

参考

furai_mountain 2022/02/17に更新

getServerSidePropsを使うとサーバーレンダリングになるため、npm run build でindex.htmlファイルができない

pages/index.tsxに直接ログイン画面を書いてたので、別ファイルにした
pages/login.tsx　この中でgetServerSidePropsしたらOK

_app.tsxには最初にアプリがマウントされたときにloginページに飛ぶようにした

useEffect内に↓

_app.tsx

  useEffect(() => {
    // ここに全ページ共通で行う処理
    router.push("/login");
  }, []);

furai_mountain 2022/02/17に更新

signInのtype errorでハマった

<any>をつけたらうまくいった

login.tsx

const signInUser = async (data: IFormValues) => {
    await signIn<any>("credentials", {
      redirect: false,
      usercode: data.user_code,
      password: data.password,
      callbackUrl: `${window.location.origin}`,
    }).then((res) => {
      console.log("signInUser:::" + JSON.stringify(res?.error));
      if (res?.error) {
        setError("UserId,Passwordを正しく入力してください");
      } else {
        router.push("/SensorDataSearch");
      }
    });
  };

参考

↑はログイン画面でログインボタンをクリックした際に動くところだが、
signIn関数後にエラーかどうかのif文でsessionを使おうとしたら、ここではまだsessionが入っていない
なので、signInの返却値を利用した。

furai_mountain 2022/02/18に更新

CSRF

のちほど書き直す

参考