npm i -g vercel

vercel --version
Vercel CLI 29.3.3
29.3.3

vercel link
Vercel CLI 29.3.3
> > No existing credentials found. Please log in:
? Log in to Vercel 
● Continue with GitHub 
○ Continue with GitLab 
○ Continue with Bitbucket 
○ Continue with Email 
○ Continue with SAML Single Sign-On 
  ─────────────────────────────────
○ Cancel 

? Set up “~/Desktop/next-app”? [Y/n] y
? Which scope should contain your project? masaki-cell
? Link to existing project? [y/N] n
? What’s your project’s name? next-auth-app
? In which directory is your code located? 
? Want to modify these settings? [y/N] y
? Which settings would you like to overwrite (select multiple)? None
✅  Linked to masaki-cell/next-auth-app 

vercel env pull .env

+ POSTGRES_PRISMA_URL (Updated)
+ NX_DAEMON
+ POSTGRES_DATABASE
+ POSTGRES_HOST
+ POSTGRES_PASSWORD
+ POSTGRES_URL
+ POSTGRES_URL_NON_POOLING
+ POSTGRES_USER
+ TURBO_REMOTE_ONLY
...

npm install @vercel/postgres
npm install prisma -D

npx prisma init

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url = env("POSTGRES_PRISMA_URL") // uses connection pooling
  directUrl = env("POSTGRES_URL_NON_POOLING") // uses a direct connection
  shadowDatabaseUrl = env("POSTGRES_URL_NON_POOLING") // used for migrations
}

model Account {
  id                 String  @id @default(cuid())
  userId             String
  type               String
  provider           String
  providerAccountId  String
  refresh_token      String?  @db.Text
  access_token       String?  @db.Text
  expires_at         Int?
  token_type         String?
  scope              String?
  id_token           String?  @db.Text
  session_state      String?

  user User @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@unique([provider, providerAccountId])
}

model Session {
  id           String   @id @default(cuid())
  sessionToken String   @unique
  userId       String
  expires      DateTime
  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
}

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String?   @unique
  emailVerified DateTime?
  image         String?
  accounts      Account[]
  sessions      Session[]
}

model VerificationToken {
  identifier String
  token      String   @unique
  expires    DateTime

  @@unique([identifier, token])
}

npx prisma migrate dev --name init
Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Datasource "db": PostgreSQL database "verceldb", schema "public" at "ep-plain-mud-160309.ap-southeast-1.postgres.vercel-storage.com"

Applying migration `20230522011708_init`

The following migration(s) have been created and applied from new schema changes:

migrations/
  └─ 20230522011708_init/
    └─ migration.sql

Your database is now in sync with your schema.

npx prisma studio

import { PrismaClient } from "@prisma/client";

let prisma: PrismaClient;

const globalForPrisma = global as unknown as {
  prisma: PrismaClient | undefined;
};

if (!globalForPrisma.prisma) {
  globalForPrisma.prisma = new PrismaClient();
}
prisma = globalForPrisma.prisma;

export default prisma;

npm i next-auth @next-auth/prisma-adapter

GITHUB_ID="生成したGithubID"
GITHUB_SECRET="生成したGithub Secret"
NEXTAUTH_URL="http://localhost:3000"
SECRET="openssl randで生成されたランダムなデータ"

openssl rand -base64 32

import { NextApiHandler } from "next";
import NextAuth from "next-auth";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import GitHubProvider from "next-auth/providers/github";
import prisma from "lib/prisma";

const authHandler: NextApiHandler = (req, res) =>
  NextAuth(req, res, authOptions);

/**
 * Configure NextAuth
 */
const authOptions = {
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_ID ?? "",
      clientSecret: process.env.GITHUB_SECRET ?? "",
    }),
  ],
  adapter: PrismaAdapter(prisma),
  secret: process.env.SECRET,
  pages: {
    signIn: "auth/login",
  },
};

export default authHandler;

import TwitterProvider from "next-auth/providers/twitter"
...
providers: [
  TwitterProvider({
    clientId: process.env.TWITTER_ID,
    clientSecret: process.env.TWITTER_SECRET
  })
],
...

import { getProviders, signIn } from "next-auth/react";
import styles from "style/styles.module.css";
import Image from "next/image";

/** types */
import { InferGetServerSidePropsType } from "next";

const login = ({
  providers,
}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
  return (
    <div className={styles.BackgroundPaper}>
      <div>
        <Image
          src="/github-mark.svg"
          width={150}
          height={150}
          objectFit="contain"
          alt={"Github Logo"}
        />
        {providers &&
          Object.values(providers).map((provider) => {
            return (
              <div key={provider.name}>
                <button
                  className={styles.githubButton}
                  onClick={() =>
                    signIn(provider.id, {
                      callbackUrl: "/top/main",
                    })
                  }
                >
                  <span className="">Sign in with {provider.name}</span>
                </button>
              </div>
            );
          })}
      </div>
    </div>
  );
};

export default login;

/**
 * プロバイダーリストを取得
 */
export const getServerSideProps = async () => {
  const providers = await getProviders().then((res) => {
    console.log(res, "<<<<< : provider response");
    return res;
  });

  return {
    props: { providers },
  };
};

- error Error: Prisma has detected that this project was built on Vercel, 
which caches dependencies. This leads to an outdated Prisma Client because Prisma's auto-generation isn't triggered. 
To fix this, make sure to run the `prisma generate` command during the build process.

Learn how: https://pris.ly/d/vercel-build

{
  ...
  "scripts" {
    "postinstall": "prisma generate"
  }
  ...
}

npm run postinstall

> [email protected] postinstall
> prisma generate

Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma

✔ Generated Prisma Client (4.14.1 | library) to ./node_modules/@prisma/client in 63ms
You can now start using Prisma Client in your code.

npx prisma studio

import { signOut } from "next-auth/react";
・
・
・
<a
 className={styles.link}
  onClick={() =>
  signOut({
   callbackUrl: "/auth/login",
   })
  }
 >
 Sign out
</a>