質問編集履歴
2
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -2,12 +2,175 @@
|
|
|
2
2
|
|
|
3
3
|
next.jsでログイン機能を作ろうと
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
next-auth-example
|
|
6
|
+
Template
|
|
6
|
-
|
|
7
|
+
コピーして始めたのですが、
|
|
7
|
-
|
|
8
|
+
mysqlにデータベースを設定し、
|
|
9
|
+
メールアドレスを登録を登録しようとしたのですがこのようなエラーが出ました、、
|
|
8
10
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
+
コレはどこに何が足りないのでしょうか、、
|
|
12
|
+
```
|
|
13
|
+
https://next-auth.js.org/errors#adapter_connection_error
|
|
14
|
+
(node:3472) UnhandledPromiseRejectionWarning: TypeError: Cannot destructure property 'manager' of 'connection' as it is null.
|
|
15
|
+
at Object.<anonymous> (/Users/user/projects/matching/node_modules/next-auth/dist/adapters/typeorm/index.js:102:9)
|
|
16
|
+
at Generator.next (<anonymous>)
|
|
17
|
+
at asyncGeneratorStep (/Users/user/projects/matching/node_modules/next-auth/dist/adapters/typeorm/index.js:28:103)
|
|
18
|
+
at _next (/Users/user/projects/matching/node_modules/next-auth/dist/adapters/typeorm/index.js:30:194)
|
|
19
|
+
at runMicrotasks (<anonymous>)
|
|
20
|
+
at processTicksAndRejections (internal/process/task_queues.js:97:5)
|
|
21
|
+
(node:3472) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 6)
|
|
22
|
+
```
|
|
11
23
|
|
|
24
|
+
データベースの変更は[github](https://github.com/nextauthjs/next-auth-example)を参考にやらせてもらったつもりです
|
|
25
|
+
```
|
|
26
|
+
メールアドレス登録時のユーアールエル
|
|
27
|
+
https://next-auth-example.now.sh/api/auth/signin?callbackUrl=https%3A%2F%2Fnext-auth-example.now.sh%2F
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
[next-auth-example].js
|
|
34
|
+
|
|
35
|
+
import NextAuth from 'next-auth'
|
|
36
|
+
import Providers from 'next-auth/providers'
|
|
37
|
+
|
|
38
|
+
// For more information on each option (and a full list of options) go to
|
|
39
|
+
// https://next-auth.js.org/configuration/options
|
|
40
|
+
const options = {
|
|
41
|
+
// https://next-auth.js.org/configuration/providers
|
|
42
|
+
providers: [
|
|
43
|
+
Providers.Email({
|
|
44
|
+
server: process.env.EMAIL_SERVER,
|
|
45
|
+
from: process.env.EMAIL_FROM,
|
|
46
|
+
}),
|
|
47
|
+
Providers.Apple({
|
|
48
|
+
clientId: process.env.APPLE_ID,
|
|
49
|
+
clientSecret: {
|
|
50
|
+
appleId: process.env.APPLE_ID,
|
|
51
|
+
teamId: process.env.APPLE_TEAM_ID,
|
|
52
|
+
privateKey: process.env.APPLE_PRIVATE_KEY,
|
|
53
|
+
keyId: process.env.APPLE_KEY_ID,
|
|
54
|
+
}
|
|
55
|
+
}),
|
|
56
|
+
Providers.Auth0({
|
|
57
|
+
clientId: process.env.AUTH0_ID,
|
|
58
|
+
clientSecret: process.env.AUTH0_SECRET,
|
|
59
|
+
domain: process.env.AUTH0_DOMAIN
|
|
60
|
+
}),
|
|
61
|
+
Providers.Facebook({
|
|
62
|
+
clientId: process.env.FACEBOOK_ID,
|
|
63
|
+
clientSecret: process.env.FACEBOOK_SECRET
|
|
64
|
+
}),
|
|
65
|
+
Providers.GitHub({
|
|
66
|
+
clientId: process.env.GITHUB_ID,
|
|
67
|
+
clientSecret: process.env.GITHUB_SECRET
|
|
68
|
+
}),
|
|
69
|
+
Providers.Google({
|
|
70
|
+
clientId: process.env.GOOGLE_ID,
|
|
71
|
+
clientSecret: process.env.GOOGLE_SECRET
|
|
72
|
+
}),
|
|
73
|
+
Providers.Twitter({
|
|
74
|
+
clientId: process.env.TWITTER_ID,
|
|
75
|
+
clientSecret: process.env.TWITTER_SECRET
|
|
76
|
+
}),
|
|
77
|
+
],
|
|
78
|
+
// Database optional. MySQL, Maria DB, Postgres and MongoDB are supported.
|
|
79
|
+
// https://next-auth.js.org/configuration/database
|
|
80
|
+
//
|
|
81
|
+
// Notes:
|
|
82
|
+
// * You must to install an appropriate node_module for your database
|
|
83
|
+
// * The Email provider requires a database (OAuth providers do not)
|
|
12
|
-
|
|
84
|
+
database: process.env.DATABASE_URL,
|
|
85
|
+
|
|
86
|
+
// The secret should be set to a reasonably long random string.
|
|
87
|
+
// It is used to sign cookies and to sign and encrypt JSON Web Tokens, unless
|
|
88
|
+
// a seperate secret is defined explicitly for encrypting the JWT.
|
|
89
|
+
secret: process.env.SECRET,
|
|
90
|
+
|
|
91
|
+
session: {
|
|
92
|
+
// Use JSON Web Tokens for session instead of database sessions.
|
|
93
|
+
// This option can be used with or without a database for users/accounts.
|
|
94
|
+
// Note: `jwt` is automatically set to `true` if no database is specified.
|
|
95
|
+
jwt: true,
|
|
96
|
+
|
|
97
|
+
// Seconds - How long until an idle session expires and is no longer valid.
|
|
98
|
+
// maxAge: 30 * 24 * 60 * 60, // 30 days
|
|
99
|
+
|
|
100
|
+
// Seconds - Throttle how frequently to write to database to extend a session.
|
|
101
|
+
// Use it to limit write operations. Set to 0 to always update the database.
|
|
102
|
+
// Note: This option is ignored if using JSON Web Tokens
|
|
103
|
+
// updateAge: 24 * 60 * 60, // 24 hours
|
|
104
|
+
},
|
|
105
|
+
|
|
106
|
+
// JSON Web tokens are only used for sessions if the `jwt: true` session
|
|
107
|
+
// option is set - or by default if no database is specified.
|
|
108
|
+
// https://next-auth.js.org/configuration/options#jwt
|
|
109
|
+
jwt: {
|
|
110
|
+
// A secret to use for key generation (you should set this explicitly)
|
|
111
|
+
// secret: 'INp8IvdIyeMcoGAgFGoA61DdBglwwSqnXJZkgz8PSnw',
|
|
112
|
+
|
|
113
|
+
// Set to true to use encryption (default: false)
|
|
13
|
-
|
|
114
|
+
// encryption: true,
|
|
115
|
+
|
|
116
|
+
// You can define your own encode/decode functions for signing and encryption
|
|
117
|
+
// if you want to override the default behaviour.
|
|
118
|
+
// encode: async ({ secret, token, maxAge }) => {},
|
|
119
|
+
// decode: async ({ secret, token, maxAge }) => {},
|
|
120
|
+
},
|
|
121
|
+
|
|
122
|
+
// You can define custom pages to override the built-in pages.
|
|
123
|
+
// The routes shown here are the default URLs that will be used when a custom
|
|
124
|
+
// pages is not specified for that route.
|
|
125
|
+
// https://next-auth.js.org/configuration/pages
|
|
126
|
+
pages: {
|
|
127
|
+
// signIn: '/api/auth/signin', // Displays signin buttons
|
|
128
|
+
// signOut: '/api/auth/signout', // Displays form with sign out button
|
|
129
|
+
// error: '/api/auth/error', // Error code passed in query string as ?error=
|
|
130
|
+
// verifyRequest: '/api/auth/verify-request', // Used for check email page
|
|
131
|
+
// newUser: null // If set, new users will be directed here on first sign in
|
|
132
|
+
},
|
|
133
|
+
|
|
134
|
+
// Callbacks are asynchronous functions you can use to control what happens
|
|
135
|
+
// when an action is performed.
|
|
136
|
+
// https://next-auth.js.org/configuration/callbacks
|
|
137
|
+
callbacks: {
|
|
138
|
+
// signIn: async (user, account, profile) => { return Promise.resolve(true) },
|
|
139
|
+
// redirect: async (url, baseUrl) => { return Promise.resolve(baseUrl) },
|
|
140
|
+
// session: async (session, user) => { return Promise.resolve(session) },
|
|
141
|
+
// jwt: async (token, user, account, profile, isNewUser) => { return Promise.resolve(token) }
|
|
142
|
+
},
|
|
143
|
+
|
|
144
|
+
// Events are useful for logging
|
|
145
|
+
// https://next-auth.js.org/configuration/events
|
|
146
|
+
events: { },
|
|
147
|
+
|
|
148
|
+
// Enable debug messages in the console if you are having problems
|
|
149
|
+
debug: false,
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
export default (req, res) => NextAuth(req, res, options)
|
|
153
|
+
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
```
|
|
158
|
+
.env.local
|
|
159
|
+
NEXTAUTH_URL=http://localhost:3000
|
|
160
|
+
SECRET=
|
|
161
|
+
AUTH0_ID=
|
|
162
|
+
AUTH0_SECRET=
|
|
163
|
+
AUTH0_DOMAIN=
|
|
164
|
+
FACEBOOK_ID=
|
|
165
|
+
FACEBOOK_SECRET=
|
|
166
|
+
GITHUB_ID=
|
|
167
|
+
GITHUB_SECRET=
|
|
168
|
+
GOOGLE_ID=
|
|
169
|
+
GOOGLE_SECRET=
|
|
170
|
+
TWITTER_ID=
|
|
171
|
+
TWITTER_SECRET=
|
|
172
|
+
EMAIL_SERVER=smtp://username:password@smtp.example.com.com:587
|
|
173
|
+
EMAIL_FROM=NextAuth <noreply@example.com>
|
|
174
|
+
DATABASE_URL=mysql://username:password@127.0.0.1:3306/database_name?synchronize=true
|
|
175
|
+
|
|
176
|
+
```
|
1
修正
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
Next.js ログイン機能
|
|
1
|
+
Next.js ログイン機能を実装したい！！
|
body
CHANGED
|
@@ -1,139 +1,13 @@
|
|
|
1
1
|
Next.js初心者です
|
|
2
2
|
|
|
3
|
-
NextAuth.jsというパッケージを使えば認証機能がデータベース無しで実現できるというのを知り、早速公式ドキュメントどうりにやってみたのですが、
|
|
4
|
-
早速500エラーが出てきて止まっています[NextAuth.jsドキュメント](https://next-auth.js.org/getting-started/example)
|
|
5
|
-
|
|
3
|
+
next.jsでログイン機能を作ろうと
|
|
6
|
-
importで使っていたパッケージはすべてインストールしたので間違えていないはずなのですが、どうしてでしょうか、、、
|
|
7
4
|
|
|
5
|
+
[git](https://github.com/vercel/next.js/tree/canary/examples/with-firebase-hosting)
|
|
8
|
-
|
|
6
|
+
このGitのとおりにインストールして始めようとしたのですが、
|
|
7
|
+
いきなりのエラーで諦めました、、
|
|
9
8
|
|
|
10
|
-
|
|
9
|
+
NextAuth.jsを用いた認証機能を試したのですが
|
|
11
|
-
|
|
10
|
+
やはりいきなりのエラーであきらめました、、
|
|
12
11
|
|
|
13
|
-
|
|
14
|
-
import Head from 'next/head'
|
|
15
|
-
import styles from '../styles/Home.module.css'
|
|
16
|
-
import React from 'react'
|
|
17
|
-
import { signIn, signOut, useSession } from 'next-auth/client'
|
|
18
|
-
|
|
19
|
-
export default function Page() {
|
|
20
|
-
const [ session, loading ] = useSession()
|
|
21
|
-
|
|
22
|
-
return <>
|
|
23
|
-
{!session && <>
|
|
24
|
-
Not signed in <br/>
|
|
25
|
-
<button onClick={signIn}>Sign in</button>
|
|
26
|
-
</>}
|
|
27
|
-
{session && <>
|
|
28
|
-
Signed in as {session.user.email} <br/>
|
|
29
|
-
<button onClick={signOut}>Sign out</button>
|
|
30
|
-
</>}
|
|
31
|
-
</>
|
|
32
|
-
}
|
|
33
|
-
export default function Home() {
|
|
34
|
-
return (
|
|
35
|
-
<div className={styles.container}>
|
|
36
|
-
<Head>
|
|
37
|
-
<title>Create Next App</title>
|
|
38
|
-
<link rel="icon" href="/favicon.ico" />
|
|
39
|
-
</Head>
|
|
40
|
-
|
|
41
|
-
<main className={styles.main}>
|
|
42
|
-
<h1 className={styles.title}>
|
|
43
|
-
Welcome to <a href="https://nextjs.org">Next.js!</a>
|
|
44
|
-
</h1>
|
|
45
|
-
|
|
46
|
-
<p className={styles.description}>
|
|
47
|
-
Get started by editing{' '}
|
|
48
|
-
<code className={styles.code}>pages/index.js</code>
|
|
49
|
-
</p>
|
|
50
|
-
|
|
51
|
-
<div className={styles.grid}>
|
|
52
|
-
<a href="https://nextjs.org/docs" className={styles.card}>
|
|
53
|
-
<h3>Documentation →</h3>
|
|
54
|
-
<p>Find in-depth information about Next.js features and API.</p>
|
|
55
|
-
</a>
|
|
56
|
-
|
|
57
|
-
<a href="https://nextjs.org/learn" className={styles.card}>
|
|
58
|
-
<h3>Learn →</h3>
|
|
59
|
-
<p>Learn about Next.js in an interactive course with quizzes!</p>
|
|
60
|
-
</a>
|
|
61
|
-
|
|
62
|
-
<a
|
|
63
|
-
href="https://github.com/vercel/next.js/tree/master/examples"
|
|
64
|
-
className={styles.card}
|
|
65
|
-
>
|
|
66
|
-
<h3>Examples →</h3>
|
|
67
|
-
<p>Discover and deploy boilerplate example Next.js projects.</p>
|
|
68
|
-
</a>
|
|
69
|
-
|
|
70
|
-
<a
|
|
71
|
-
href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
|
|
72
|
-
className={styles.card}
|
|
73
|
-
>
|
|
74
|
-
<h3>Deploy →</h3>
|
|
75
|
-
<p>
|
|
76
|
-
Instantly deploy your Next.js site to a public URL with Vercel.
|
|
77
|
-
</p>
|
|
78
|
-
</a>
|
|
79
|
-
</div>
|
|
80
|
-
</main>
|
|
81
|
-
|
|
82
|
-
<footer className={styles.footer}>
|
|
83
|
-
<a
|
|
84
|
-
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
|
|
85
|
-
target="_blank"
|
|
86
|
-
rel="noopener noreferrer"
|
|
87
|
-
>
|
|
88
|
-
Powered by{' '}
|
|
89
|
-
<img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
|
|
90
|
-
</a>
|
|
91
|
-
</footer>
|
|
92
|
-
</div>
|
|
93
|
-
)
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
```
|
|
97
|
-
```
|
|
98
|
-
[...nextauth].js
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
import NextAuth from 'next-auth'
|
|
102
|
-
import Providers from 'next-auth/providers'
|
|
103
|
-
|
|
104
|
-
const options = {
|
|
105
|
-
// Configure one or more authentication providers
|
|
106
|
-
providers: [
|
|
107
|
-
Providers.GitHub({
|
|
108
|
-
clientId: process.env.GITHUB_ID,
|
|
109
|
-
clientSecret: process.env.GITHUB_SECRET
|
|
110
|
-
}),
|
|
111
|
-
// ...add more providers here
|
|
112
|
-
],
|
|
113
|
-
|
|
114
|
-
// A database is optional, but required to persist accounts in a database
|
|
115
|
-
|
|
12
|
+
Next .jsでログイン機能は何を使えば一番手軽にできるでしょうか、、
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
export default (req, res) => NextAuth(req, res, options)
|
|
119
|
-
```
|
|
120
|
-
```
|
|
121
|
-
_app.js
|
|
122
|
-
|
|
123
|
-
import '../styles/globals.css'
|
|
124
|
-
import { Provider } from 'next-auth/client'
|
|
125
|
-
|
|
126
|
-
export default function App ({ Component, pageProps }) {
|
|
127
|
-
return (
|
|
128
|
-
<Provider session={pageProps.session}>
|
|
129
|
-
|
|
13
|
+
おすすめの記事やライブラリがあればご教授いただきたいです、、
|
|
130
|
-
</Provider>
|
|
131
|
-
)
|
|
132
|
-
}
|
|
133
|
-
function MyApp({ Component, pageProps }) {
|
|
134
|
-
return <Component {...pageProps} />
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
export default MyApp
|
|
138
|
-
|
|
139
|
-
```
|