質問編集履歴
3
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
Next.jsにてgoogleAuthのログイン機能を実装中です。
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
siguinボタンを押すとエラーが起きます。
|
|
4
4
|
|
|
5
5
|
firebaseのexport を2つに分けたり、他のサイトから記述を真似したりしたのですがダメでした、
|
|
6
6
|
[参考](https://qiita.com/HorieH/items/8b4b1c4807e1eb6fcb0a)
|
2
修正
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
Unhandled Runtime Errorエラー
|
body
CHANGED
|
@@ -5,12 +5,11 @@
|
|
|
5
5
|
firebaseのexport を2つに分けたり、他のサイトから記述を真似したりしたのですがダメでした、
|
|
6
6
|
[参考](https://qiita.com/HorieH/items/8b4b1c4807e1eb6fcb0a)
|
|
7
7
|
[参考２](https://github.com/vercel/next.js/issues/1999)
|
|
8
|
-
|
|
9
|
-
|
|
10
9
|
```
|
|
11
10
|
firebase/index.js
|
|
12
11
|
|
|
13
|
-
import firebase from 'firebase
|
|
12
|
+
import * as firebase from 'firebase'
|
|
14
13
|
import 'firebase/auth' // If you need it
|
|
15
14
|
import 'firebase/firestore' // If you need it
|
|
16
15
|
import 'firebase/storage' // If you need it
|
|
@@ -28,12 +27,8 @@
|
|
|
28
27
|
}
|
|
29
28
|
|
|
30
29
|
|
|
31
|
-
firebase.initializeApp(clientCredentials)
|
|
30
|
+
export default !firebase.apps.length ? firebase.initializeApp(clientCredentials) : firebase.app();
|
|
32
31
|
|
|
33
|
-
|
|
34
|
-
export default { firebase, auth }
|
|
35
|
-
|
|
36
|
-
|
|
37
32
|
```
|
|
38
33
|
|
|
39
34
|
```
|
|
@@ -42,7 +37,7 @@
|
|
|
42
37
|
import Head from 'next/head'
|
|
43
38
|
import { useEffect } from 'react'
|
|
44
39
|
import { useUser } from '../context/userContext'
|
|
45
|
-
import
|
|
40
|
+
import firebase from '../firebase'
|
|
46
41
|
|
|
47
42
|
export default function Signin() {
|
|
48
43
|
// Our custom hook to get context values
|
|
@@ -51,8 +46,12 @@
|
|
|
51
46
|
console.log('user:', user)
|
|
52
47
|
}, [loadingUser, user])
|
|
53
48
|
|
|
54
|
-
|
|
49
|
+
// TODO: メールアドレス・パスワード認証も追加する
|
|
50
|
+
const email = 'aa@aa.com'
|
|
51
|
+
const password = 'aaaa'
|
|
52
|
+
const auth = firebase.auth();
|
|
55
53
|
|
|
54
|
+
// TODO: 別ファイルにする
|
|
56
55
|
const googleSignIn = () => {
|
|
57
56
|
var provider = new firebase.auth.GoogleAuthProvider()
|
|
58
57
|
provider.addScope('https://www.googleapis.com/auth/contacts.readonly')
|
|
@@ -93,4 +92,5 @@
|
|
|
93
92
|
)
|
|
94
93
|
}
|
|
95
94
|
|
|
95
|
+
|
|
96
96
|
```
|
1
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,17 +1,42 @@
|
|
|
1
1
|
Next.jsにてgoogleAuthのログイン機能を実装中です。
|
|
2
2
|
|
|
3
|
-
Signボタンを押しても何も変化が起こらず、
|
|
4
|
-
|
|
3
|
+
画面をリロードするとこのようなエラーが起きます。
|
|
5
4
|
|
|
5
|
+
firebaseのexport を2つに分けたり、他のサイトから記述を真似したりしたのですがダメでした、
|
|
6
|
+
[参考](https://qiita.com/HorieH/items/8b4b1c4807e1eb6fcb0a)
|
|
6
|
-
[参考
|
|
7
|
+
[参考２](https://github.com/vercel/next.js/issues/1999)
|
|
8
|
+
|
|
7
9
|
|
|
10
|
+
```
|
|
8
|
-
firebase
|
|
11
|
+
firebase/index.js
|
|
9
|
-
ここで提示されているエラー解決内容のコードを反映させたいのですが、firebase Authの2つをexportしたい場合はどうすればよろしいのでしょうか。
|
|
10
12
|
|
|
13
|
+
import firebase from 'firebase/app'
|
|
14
|
+
import 'firebase/auth' // If you need it
|
|
15
|
+
import 'firebase/firestore' // If you need it
|
|
16
|
+
import 'firebase/storage' // If you need it
|
|
17
|
+
import 'firebase/analytics' // If you need it
|
|
11
18
|
|
|
19
|
+
const clientCredentials = {
|
|
20
|
+
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
|
|
21
|
+
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
|
|
22
|
+
databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
|
|
23
|
+
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
|
|
24
|
+
storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
|
|
25
|
+
messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
|
|
12
|
-
|
|
26
|
+
appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
|
|
27
|
+
// measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
|
|
28
|
+
}
|
|
13
29
|
|
|
30
|
+
|
|
31
|
+
firebase.initializeApp(clientCredentials)
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
export default { firebase, auth }
|
|
35
|
+
|
|
36
|
+
|
|
14
37
|
```
|
|
38
|
+
|
|
39
|
+
```
|
|
15
40
|
signin.js
|
|
16
41
|
|
|
17
42
|
import Head from 'next/head'
|
|
@@ -20,11 +45,14 @@
|
|
|
20
45
|
import { firebase, auth } from '../firebase'
|
|
21
46
|
|
|
22
47
|
export default function Signin() {
|
|
48
|
+
// Our custom hook to get context values
|
|
23
49
|
const { loadingUser, user } = useUser()
|
|
50
|
+
useEffect(() => {
|
|
51
|
+
console.log('user:', user)
|
|
52
|
+
}, [loadingUser, user])
|
|
24
53
|
|
|
54
|
+
|
|
25
55
|
|
|
26
|
-
console.log(auth)
|
|
27
|
-
|
|
28
56
|
const googleSignIn = () => {
|
|
29
57
|
var provider = new firebase.auth.GoogleAuthProvider()
|
|
30
58
|
provider.addScope('https://www.googleapis.com/auth/contacts.readonly')
|
|
@@ -53,7 +81,7 @@
|
|
|
53
81
|
return (
|
|
54
82
|
<div className="container">
|
|
55
83
|
<Head>
|
|
56
|
-
<title>
|
|
84
|
+
<title>Hands on Mania</title>
|
|
57
85
|
</Head>
|
|
58
86
|
<main className="u-text-center">
|
|
59
87
|
<h1 className="font-family-homemade">signin</h1>
|
|
@@ -65,61 +93,4 @@
|
|
|
65
93
|
)
|
|
66
94
|
}
|
|
67
95
|
|
|
68
|
-
|
|
69
|
-
```
|
|
70
|
-
```
|
|
71
|
-
userContext.js
|
|
72
|
-
|
|
73
|
-
import { useState, useEffect, createContext, useContext } from 'react'
|
|
74
|
-
|
|
75
|
-
export const UserContext = createContext()
|
|
76
|
-
|
|
77
|
-
export default function UserContextComp({ children }) {
|
|
78
|
-
const [user, setUser] = useState(null)
|
|
79
|
-
const [loadingUser, setLoadingUser] = useState(true)
|
|
80
|
-
|
|
81
|
-
useEffect(() => {
|
|
82
|
-
}, [])
|
|
83
|
-
|
|
84
|
-
return (
|
|
85
|
-
<UserContext.Provider value={{ user, setUser, loadingUser }}>{children}</UserContext.Provider>
|
|
86
|
-
)
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
export const useUser = () => useContext(UserContext)
|
|
91
|
-
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
```
|
|
95
|
-
firebase/index.js
|
|
96
|
-
|
|
97
|
-
import * as firebase from "firebase";import 'firebase/auth' // If you need it
|
|
98
|
-
import 'firebase/firestore' // If you need it
|
|
99
|
-
import 'firebase/storage' // If you need it
|
|
100
|
-
import 'firebase/analytics' // If you need it
|
|
101
|
-
|
|
102
|
-
const clientCredentials = {
|
|
103
|
-
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
|
|
104
|
-
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
|
|
105
|
-
databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
|
|
106
|
-
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
|
|
107
|
-
storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
|
|
108
|
-
messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
|
|
109
|
-
appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
|
|
110
|
-
// measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
// Check that `window` is in scope for the analytics module!
|
|
114
|
-
// if (typeof window !== 'undefined' && !firebase.apps.length) {
|
|
115
|
-
// firebase.initializeApp(clientCredentials)
|
|
116
|
-
// // To enable analytics. https://firebase.google.com/docs/analytics/get-started
|
|
117
|
-
// if ('measurementId' in clientCredentials) firebase.analytics()
|
|
118
|
-
// }
|
|
119
|
-
firebase.initializeApp(clientCredentials)
|
|
120
|
-
|
|
121
|
-
const auth = firebase.auth()
|
|
122
|
-
|
|
123
|
-
export { firebase, auth }
|
|
124
|
-
|
|
125
96
|
```
|