質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

HTTPS

HTTPS(Hypertext Transfer Protocol Secure)はHypertext Transfer プロトコルとSSL/TLS プロトコルを組み合わせたものです。WebサーバとWebブラウザの間の通信を暗号化させて、通信経路上での盗聴や第三者によるなりすましを防止します。

データベース

データベースとは、データの集合体を指します。また、そのデータの集合体の共用を可能にするシステムの意味を含めます

ログイン

ログインは、ユーザーがコンピューターシステムにアクセスするプロセスの事を呼びます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

1回答

2181閲覧

Next.js ログイン機能を実装したい!!

tomsuma

総合スコア38

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

HTTPS

HTTPS(Hypertext Transfer Protocol Secure)はHypertext Transfer プロトコルとSSL/TLS プロトコルを組み合わせたものです。WebサーバとWebブラウザの間の通信を暗号化させて、通信経路上での盗聴や第三者によるなりすましを防止します。

データベース

データベースとは、データの集合体を指します。また、そのデータの集合体の共用を可能にするシステムの意味を含めます

ログイン

ログインは、ユーザーがコンピューターシステムにアクセスするプロセスの事を呼びます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

1クリップ

投稿2020/08/30 09:12

編集2020/08/30 14:05

Next.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://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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

.env.localファイルが初期のままだからではないでしょうか。

next-auth-exampleには

1つ以上のプロバイダー(Google、Twitter、GitHub、メールなど)の詳細を追加します。

と書いてあります

投稿2020/09/23 09:55

dyekv

総合スコア128

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問