Open7

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

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

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

https://github.com/nextauthjs/next-auth/releases/tag/v4.0.0-beta.1
で適用方法を確認しながら実装

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

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

https://zenn.dev/okumura_daiki/articles/c9e0065716d862

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

https://cloudcoders.xyz/blog/nextauth-credentials-provider-with-external-api-and-login-page/
英語だけど翻訳すればとてもわかり易い
結局このサイトをかなり参考にした

https://reffect.co.jp/react/next-auth#Session_Provider
SessionProvider、session,callbacksなどの説明が詳しい

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

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

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

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

$ openssl rand -base64 32

参考

https://next-auth.js.org/getting-started/upgrade-v4#missing-secret

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

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

[...nextauth].ts
callbacks: {

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

参考

https://github.com/nextauthjs/next-auth/issues/808

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

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

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

useEffect内に↓

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

https://zenn.dev/catnose99/articles/2169dae14b58b6

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");
      }
    });
  };

参考

https://stackoverflow.com/questions/44147937/property-does-not-exist-on-type-never

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

作成者以外のコメントは許可されていません