編集履歴

質問編集履歴

修正

2020/08/30 14:05

投稿

tomsuma

スコア38

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -6,20 +6,346 @@
-[git](https://github.com/vercel/next.js/tree/canary/examples/with-firebase-hosting)
-このGitのとおりにインストールして始めようとしたのですが、
-いきなりのエラーで諦めました、、
-NextAuth.jsを用いた認証機能を試したのですが
-やはりいきなりのエラーであきらめました、、
-Next .jsでログイン機能は何を使えば一番手軽にできるでしょうか、、
-おすすめの記事やライブラリがあればご教授いただきたいです、、
+next-auth-example
+Template
+コピーして始めたのですが、
+mysqlにデータベースを設定し、
+メールアドレスを登録を登録しようとしたのですがこのようなエラーが出ました、、
+コレはどこに何が足りないのでしょうか、、
+```
+https://next-auth.js.org/errors#adapter_connection_error
+(node:3472) UnhandledPromiseRejectionWarning: TypeError: Cannot destructure property 'manager' of 'connection' as it is null.
+    at Object.<anonymous> (/Users/user/projects/matching/node_modules/next-auth/dist/adapters/typeorm/index.js:102:9)
+    at Generator.next (<anonymous>)
+    at asyncGeneratorStep (/Users/user/projects/matching/node_modules/next-auth/dist/adapters/typeorm/index.js:28:103)
+    at _next (/Users/user/projects/matching/node_modules/next-auth/dist/adapters/typeorm/index.js:30:194)
+    at runMicrotasks (<anonymous>)
+    at processTicksAndRejections (internal/process/task_queues.js:97:5)
+(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)
+```
+データベースの変更は[github](https://github.com/nextauthjs/next-auth-example)を参考にやらせてもらったつもりです
+```
+メールアドレス登録時のユーアールエル
+https://next-auth-example.now.sh/api/auth/signin?callbackUrl=https%3A%2F%2Fnext-auth-example.now.sh%2F
+```
+```
+[next-auth-example].js
+import NextAuth from 'next-auth'
+import Providers from 'next-auth/providers'
+// For more information on each option (and a full list of options) go to
+// https://next-auth.js.org/configuration/options
+const options = {
+  // https://next-auth.js.org/configuration/providers
+  providers: [
+    Providers.Email({
+      server: process.env.EMAIL_SERVER,
+      from: process.env.EMAIL_FROM,
+    }),
+    Providers.Apple({
+      clientId: process.env.APPLE_ID,
+      clientSecret: {
+        appleId: process.env.APPLE_ID,
+        teamId: process.env.APPLE_TEAM_ID,
+        privateKey: process.env.APPLE_PRIVATE_KEY,
+        keyId: process.env.APPLE_KEY_ID,
+      }
+    }),
+    Providers.Auth0({
+      clientId: process.env.AUTH0_ID,
+      clientSecret: process.env.AUTH0_SECRET,
+      domain: process.env.AUTH0_DOMAIN
+    }),
+    Providers.Facebook({
+      clientId: process.env.FACEBOOK_ID,
+      clientSecret: process.env.FACEBOOK_SECRET
+    }),
+    Providers.GitHub({
+      clientId: process.env.GITHUB_ID,
+      clientSecret: process.env.GITHUB_SECRET
+    }),
+    Providers.Google({
+      clientId: process.env.GOOGLE_ID,
+      clientSecret: process.env.GOOGLE_SECRET
+    }),
+    Providers.Twitter({
+      clientId: process.env.TWITTER_ID,
+      clientSecret: process.env.TWITTER_SECRET
+    }),
+  ],
+  // Database optional. MySQL, Maria DB, Postgres and MongoDB are supported.
+  // https://next-auth.js.org/configuration/database
+  //
+  // Notes:
+  // * You must to install an appropriate node_module for your database
+  // * The Email provider requires a database (OAuth providers do not)
+  database: process.env.DATABASE_URL,
+  // The secret should be set to a reasonably long random string.
+  // It is used to sign cookies and to sign and encrypt JSON Web Tokens, unless
+  // a seperate secret is defined explicitly for encrypting the JWT.
+  secret: process.env.SECRET,
+  session: {
+    // Use JSON Web Tokens for session instead of database sessions.
+    // This option can be used with or without a database for users/accounts.
+    // Note: `jwt` is automatically set to `true` if no database is specified.
+    jwt: true,
+    // Seconds - How long until an idle session expires and is no longer valid.
+    // maxAge: 30 * 24 * 60 * 60, // 30 days
+    // Seconds - Throttle how frequently to write to database to extend a session.
+    // Use it to limit write operations. Set to 0 to always update the database.
+    // Note: This option is ignored if using JSON Web Tokens
+    // updateAge: 24 * 60 * 60, // 24 hours
+  },
+  // JSON Web tokens are only used for sessions if the `jwt: true` session
+  // option is set - or by default if no database is specified.
+  // https://next-auth.js.org/configuration/options#jwt
+  jwt: {
+    // A secret to use for key generation (you should set this explicitly)
+    // secret: 'INp8IvdIyeMcoGAgFGoA61DdBglwwSqnXJZkgz8PSnw',
+    // Set to true to use encryption (default: false)
+    // encryption: true,
+    // You can define your own encode/decode functions for signing and encryption
+    // if you want to override the default behaviour.
+    // encode: async ({ secret, token, maxAge }) => {},
+    // decode: async ({ secret, token, maxAge }) => {},
+  },
+  // You can define custom pages to override the built-in pages.
+  // The routes shown here are the default URLs that will be used when a custom
+  // pages is not specified for that route.
+  // https://next-auth.js.org/configuration/pages
+  pages: {
+    // signIn: '/api/auth/signin',  // Displays signin buttons
+    // signOut: '/api/auth/signout', // Displays form with sign out button
+    // error: '/api/auth/error', // Error code passed in query string as ?error=
+    // verifyRequest: '/api/auth/verify-request', // Used for check email page
+    // newUser: null // If set, new users will be directed here on first sign in
+  },
+  // Callbacks are asynchronous functions you can use to control what happens
+  // when an action is performed.
+  // https://next-auth.js.org/configuration/callbacks
+  callbacks: {
+    // signIn: async (user, account, profile) => { return Promise.resolve(true) },
+    // redirect: async (url, baseUrl) => { return Promise.resolve(baseUrl) },
+    // session: async (session, user) => { return Promise.resolve(session) },
+    // jwt: async (token, user, account, profile, isNewUser) => { return Promise.resolve(token) }
+  },
+  // Events are useful for logging
+  // https://next-auth.js.org/configuration/events
+  events: { },
+  // Enable debug messages in the console if you are having problems
+  debug: false,
+}
+export default (req, res) => NextAuth(req, res, options)
+```
+```
+.env.local
+NEXTAUTH_URL=http://localhost:3000
+SECRET=
+AUTH0_ID=
+AUTH0_SECRET=
+AUTH0_DOMAIN=
+FACEBOOK_ID=
+FACEBOOK_SECRET=
+GITHUB_ID=
+GITHUB_SECRET=
+GOOGLE_ID=
+GOOGLE_SECRET=
+TWITTER_ID=
+TWITTER_SECRET=
+EMAIL_SERVER=smtp://username:password@smtp.example.com.com:587
+EMAIL_FROM=NextAuth <noreply@example.com>
+DATABASE_URL=mysql://username:password@127.0.0.1:3306/database_name?synchronize=true
+```

修正

2020/08/30 14:05

投稿

tomsuma

スコア38

test CHANGED Viewed

	@@ -1 +1 @@
1	- Next.js　ログイン機能について
1	+ Next.js　ログイン機能を実装したい！！

test CHANGED Viewed

@@ -2,276 +2,24 @@
-NextAuth.jsというパッケージを使えば認証機能がデータベース無しで実現できるというのを知り、早速公式ドキュメントどうりにやってみたのですが、
-早速500エラーが出てきて止まっています[NextAuth.jsドキュメント](https://next-auth.js.org/getting-started/example)
-新しい状態からはじめて３つのファイルの書き換えしか行っていないのと
+next.jsでログイン機能を作ろうと
-importで使っていたパッケージはすべてインストールしたので間違えていないはずなのですが、どうしてでしょうか、、、
+[git](https://github.com/vercel/next.js/tree/canary/examples/with-firebase-hosting)
-next.jsでログイン機能を実装したいだけなのでNextAuth.jsにあまりこだわりはないです、
+このGitのとおりにインストールして始めようとしたのですが、
+いきなりのエラーで諦めました、、
-```
+NextAuth.jsを用いた認証機能を試したのですが
-pages/index.js
+やはりいきなりのエラーであきらめました、、
+Next .jsでログイン機能は何を使えば一番手軽にできるでしょうか、、
-import Head from 'next/head'
-import styles from '../styles/Home.module.css'
-import React from 'react'
-import { signIn, signOut, useSession } from 'next-auth/client'
-export default function Page() {
-  const [ session, loading ] = useSession()
-  return <>
-    {!session && <>
-      Not signed in <br/>
+おすすめの記事やライブラリがあればご教授いただきたいです、、
-      <button onClick={signIn}>Sign in</button>
-    </>}
-    {session && <>
-      Signed in as {session.user.email} <br/>
-      <button onClick={signOut}>Sign out</button>
-    </>}
-  </>
-}
-export default function Home() {
-  return (
-    <div className={styles.container}>
-      <Head>
-        <title>Create Next App</title>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <main className={styles.main}>
-        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
-        </h1>
-        <p className={styles.description}>
-          Get started by editing{' '}
-          <code className={styles.code}>pages/index.js</code>
-        </p>
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h3>Documentation &rarr;</h3>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h3>Learn &rarr;</h3>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-          <a
-            href="https://github.com/vercel/next.js/tree/master/examples"
-            className={styles.card}
-          >
-            <h3>Examples &rarr;</h3>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-          <a
-            href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-          >
-            <h3>Deploy &rarr;</h3>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
-      <footer className={styles.footer}>
-        <a
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Powered by{' '}
-          <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
-        </a>
-      </footer>
-    </div>
-  )
-}
-```
-```
-[...nextauth].js
-import NextAuth from 'next-auth'
-import Providers from 'next-auth/providers'
-const options = {
-  // Configure one or more authentication providers
-  providers: [
-    Providers.GitHub({
-      clientId: process.env.GITHUB_ID,
-      clientSecret: process.env.GITHUB_SECRET
-    }),
-    // ...add more providers here
-  ],
-  // A database is optional, but required to persist accounts in a database
-  database: process.env.DATABASE_URL,
-}
-export default (req, res) => NextAuth(req, res, options)
-```
-```
-_app.js
-import '../styles/globals.css'
-import { Provider } from 'next-auth/client'
-export default function App ({ Component, pageProps }) {
-  return (
-    <Provider session={pageProps.session}>
-      <Component {...pageProps} />
-    </Provider>
-  )
-}
-function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
-}
-export default MyApp
-```