はじめに
初めまして！
エンジニアになって数年、今まで本を読むだけでしたが、もっとプライベートで楽しみながら成長したい！自分が学んだ足跡を残していきたい！と思い記事を書きました！
最終的には自在に開発できるようになりたいと思っています。
いろいろな記事を参考にさせてもらっています。
その中でもこれってどういう意味？とかつまづいたところを念入りに書いていこうかと思います。
今回の目的
nextjsはまだですが、実際のアプリ開発からどう作られていくかを学んでいくためにクローンアプリを開発します。
とは言っても自分で考えることは特になくYoutubeを見てやっていきます。
その中で覚えておきたい部分を分類ごとに記載していきます。なので、その時々に知ったことを小出しにしていく形になります。
前回
使用したものや事前準備
・Macbook Pro
・Visual Studio Code
使用にさせていただいた動画
Next.jsの知識
bcrypt
compare
ハッシュ化されたパスワードと平文パスワードを比較する。
await compare(
credentials.password,
user.hasehdPassword
);
bcryptはハッシュ値にソルトされた回数が記載されているので、それを元に平文パスワードと比較ができる
下記の場合、bcryptのバージョンが2で12回ソルトされている。
$2a$12$saltsaltsaltsalt$hashvaluehashvalue
next-auth
signIn
api/auth/[...nextauth].jsで設定したプロバイダー(今回で言うとCredentials)を呼び出して認証処理をする。
redirectをfalseにしているため、callbackUrlにはリダイレクトしない。
await signIn("credentials", {
email,
password,
redirect: false,
callbackUrl: "/"
});
import NextAuth from "next-auth/next";
設定オプション（必須ではない）
pages
デフォルトの認証ページをカスタマイズするURL
``ts
// サインインページのURLをデフォルトのものから "/auth" に変更
pages: {
signIn: "/auth"
},
#### debug
デバッグログを有効にするか
```ts
debug: process.env.NODE_ENV === "development"
session
セッション管理の設定
WT（JSON Web Tokens）形式でクライアントサイドに保存
jwt
JWTトークンを生成する際の設定
secret
next-auth 全体で使用される秘密鍵を指定
import { useRouter } from "next/router";
内部リンクとして利用する
const router = useRouter();
...
router.push('/about');
react-icons
豊富なアイコンをそろえたライブラリ
GithubProvider | GoogleProvider
[...nextauth].tsでプロバイダーに記述。
import GithubProvider from "next-auth/providers/github";
import GoogleProvider from "next-auth/providers/google";
providers: [
GithubProvider({
clientId: process.env.GITHUB_ID || '',
clientSecret: process.env.GITHUB_SECRET || '',
}),
GoogleProvider({
clientId: process.env.GOOGLE_ID || '',
clientSecret: process.env.GOOGLE_SECRET || '',
}),
...
npm install @next-auth/prisma-adapter
外部認証後にユーザー情報などをprismaに保存するライブラリ
次
まだ