fix(provider): Fixes for email sign in (#1285)

* fix(adapter): Fix Prisma delete

Must use Prsima deleteMany() instead of delete() with multiple clauses.

* feat: Update example project

Update example project to make it easier to test with database adapters.

* fix(ui): Fix message text in light / auto theme

Info message text is always on the same background (blue) on both themes so should always be white.

* docs: Update example .env [skip release]

* feat: Update Prisma peerOptionalDependencies

.env.local.example

@@ -1,8 +1,13 @@
-# Rename file to .env.local and populate values
+# Rename file to .env.local (or .env) and populate values
 # to be able to run the dev app
 
 NEXTAUTH_URL=http://localhost:3000
-SECRET= Linux: `openssl rand -hex 32` or https://generate-secret.now.sh/32
+
+# You can use `openssl rand -hex 32` or 
+# https://generate-secret.now.sh/32 to generate a secret.
+# Note: Changing a secret may invalidate existing sessions
+# and/or verificaion tokens.
+SECRET= 
 
 AUTH0_ID=
 AUTH0_DOMAIN=
@@ -12,4 +17,17 @@ GITHUB_ID=
 GITHUB_SECRET=
 
 TWITTER_ID=
-TWITTER_SECRET=
+TWITTER_SECRET=
+
+# Example configuration for a Gmail account (will need SMTP enabled)
+EMAIL_SERVER=smtps://user@gmail.com:password@smtp.gmail.com:465
+EMAIL_FROM=user@gmail.com
+
+# You can use any of these as the "DATABASE_URL" for
+# databases started with Docker using `npm run db:start`.
+# Note: If using with Prisma adapter, you need to use a `.env`
+# file rather than a `.env.local` file to configure env vars.
+# Postgres: DATABASE_URL=postgres://nextauth:password@127.0.0.1:5432/nextauth?synchronize=true
+# MySQL:    DATABASE_URL=mysql://nextauth:password@127.0.0.1:3306/nextauth?synchronize=true
+# MongoDB:  DATABASE_URL=mongodb://nextauth:password@127.0.0.1:27017/nextauth?synchronize=true
+DATABASE_URL=

.gitignore

@@ -33,4 +33,7 @@ node_modules
 
 # GitHub Actions runner
 /actions-runner
-/_work
+/_work
+
+# Prisma migrations
+/prisma/migrations

package.json

@@ -64,12 +64,13 @@
     "mysql": "^2.18.1",
     "mssql": "^6.2.1",
     "pg": "^8.2.1",
-    "@prisma/client": "^2.12.0"
+    "@prisma/client": "^2.16.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
     "@babel/core": "^7.9.6",
     "@babel/preset-env": "^7.9.6",
+    "@prisma/client": "^2.16.1",
     "@semantic-release/commit-analyzer": "^8.0.1",
     "@semantic-release/github": "^7.2.0",
     "@semantic-release/npm": "7.0.8",
@@ -89,6 +90,7 @@
     "pg": "^8.2.1",
     "postcss-cli": "^7.1.1",
     "postcss-nested": "^4.2.1",
+    "prisma": "^2.16.1",
     "puppeteer": "^5.2.1",
     "puppeteer-extra": "^3.1.15",
     "puppeteer-extra-plugin-stealth": "^2.6.1",

pages/api/auth/[...nextauth].js

@@ -1,8 +1,16 @@
 import NextAuth from 'next-auth'
 import Providers from 'next-auth/providers'
 
+// import Adapters from 'next-auth/adapters'
+// import { PrismaClient } from '@prisma/client'
+// const prisma = new PrismaClient()
+
 export default NextAuth({
   providers: [
+    Providers.Email({
+      server: process.env.EMAIL_SERVER,
+      from: process.env.EMAIL_FROM
+    }),
     Providers.GitHub({
       clientId: process.env.GITHUB_ID,
       clientSecret: process.env.GITHUB_SECRET
@@ -39,5 +47,15 @@ export default NextAuth({
     encryption: true,
     secret: process.env.SECRET
   },
-  debug: false
+  debug: false,
+  theme: 'auto'
+
+  // Default Database Adapter (TypeORM)
+  // database: process.env.DATABASE_URL
+
+  // Prisma Database Adapter
+  // To configure this app to use the schema in `prisma/schema.prisma` run:
+  // npx prisma generate
+  // npx prisma migrate dev --preview-feature
+  // adapter: Adapters.Prisma.Adapter({ prisma })
 })

pages/api/examples/jwt.js

@@ -4,6 +4,6 @@ import jwt from 'next-auth/jwt'
 const secret = process.env.SECRET
 
 export default async (req, res) => {
-  const token = await jwt.getToken({ req, secret, encryption: true })
+  const token = await jwt.getToken({ req, secret })
   res.send(JSON.stringify(token, null, 2))
 }

prisma/schema.prisma

@@ -0,0 +1,63 @@
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+model Account {
+  id                 Int       @default(autoincrement()) @id
+  compoundId         String    @unique @map(name: "compound_id")
+  userId             Int       @map(name: "user_id")
+  providerType       String    @map(name: "provider_type")
+  providerId         String    @map(name: "provider_id")
+  providerAccountId  String    @map(name: "provider_account_id")
+  refreshToken       String?   @map(name: "refresh_token")
+  accessToken        String?   @map(name: "access_token")
+  accessTokenExpires DateTime? @map(name: "access_token_expires")
+  createdAt          DateTime  @default(now()) @map(name: "created_at")
+  updatedAt          DateTime  @default(now()) @map(name: "updated_at")
+
+  @@index([providerAccountId], name: "providerAccountId")
+  @@index([providerId], name: "providerId")
+  @@index([userId], name: "userId")
+
+  @@map(name: "accounts")
+}
+
+model Session {
+  id           Int      @default(autoincrement()) @id
+  userId       Int      @map(name: "user_id")
+  expires      DateTime
+  sessionToken String   @unique @map(name: "session_token")
+  accessToken  String   @unique @map(name: "access_token")
+  createdAt    DateTime @default(now()) @map(name: "created_at")
+  updatedAt    DateTime @default(now()) @map(name: "updated_at")
+
+  @@map(name: "sessions")
+}
+
+model User {
+  id            Int       @default(autoincrement()) @id
+  name          String?
+  email         String?   @unique
+  emailVerified DateTime? @map(name: "email_verified")
+  image         String?
+  createdAt     DateTime  @default(now()) @map(name: "created_at")
+  updatedAt     DateTime  @default(now()) @map(name: "updated_at")
+
+  @@map(name: "users")
+}
+
+model VerificationRequest {
+  id         Int      @default(autoincrement()) @id
+  identifier String
+  token      String   @unique
+  expires    DateTime
+  createdAt  DateTime  @default(now()) @map(name: "created_at")
+  updatedAt  DateTime  @default(now()) @map(name: "updated_at")
+
+  @@map(name: "verification_requests")
+}

src/adapters/prisma/index.js

@@ -288,7 +288,7 @@ const Adapter = (config) => {
         })
         if (verificationRequest && verificationRequest.expires && new Date() > verificationRequest.expires) {
           // Delete verification entry so it cannot be used again
-          await prisma[VerificationRequest].delete({ where: { identifier, token: hashedToken } })
+          await prisma[VerificationRequest].deleteMany({ where: { identifier, token: hashedToken } })
           return null
         }
 
@@ -304,7 +304,7 @@ const Adapter = (config) => {
       try {
         // Delete verification entry so it cannot be used again
         const hashedToken = createHash('sha256').update(`${token}${secret}`).digest('hex')
-        await prisma[VerificationRequest].delete({ where: { identifier, token: hashedToken } })
+        await prisma[VerificationRequest].deleteMany({ where: { identifier, token: hashedToken } })
       } catch (error) {
         logger.error('DELETE_VERIFICATION_REQUEST_ERROR', error)
         return Promise.reject(new Error('DELETE_VERIFICATION_REQUEST_ERROR', error))

src/css/index.css

@@ -3,6 +3,7 @@
   --border-radius: .3rem;
   --color-error: #c94b4b;
   --color-info: #157efb;
+  --color-info-text: #fff;
 }
 
 .__next-auth-theme-auto,
@@ -23,7 +24,6 @@
   --color-control-border: #555;
   --color-button-active-background: #060606;
   --color-button-active-border: #666;
-
   --color-seperator: #444;
 }
 
@@ -203,13 +203,13 @@ a.site {
     font-weight: 500;
     border-radius: 0.3rem;
     background: var(--color-info);
-    color: var(--color-text);
 
     p {
       text-align: left;
       padding: 0.5rem 1rem;
       font-size: 0.9rem;
       line-height: 1.2rem;
+      color: var(--color-info-text);
     }
   }