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

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

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

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Next.js

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

ログイン

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

React.js

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

Q&A

解決済

1回答

6017閲覧

TypeError: Object(...) is not a functionをどう直せばいいかわからない

tomsuma

総合スコア38

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Next.js

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

ログイン

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

React.js

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

0グッド

0クリップ

投稿2020/09/01 12:09

編集2020/09/01 12:59

Next React初心者です

*実現したいこと
next.jsでのログイン機能の実装

gitのリポジトリを真似して同じ様にログイン機能を実装しているのですが
参考リポジトリ

Server Error TypeError: Object(...) is not a function

とターミナルのエラーが消えません
useUserファイルの
initFirebase()

が原因なのは分かるのですがどう書き換えたら良いのか分からず、
消してみたりしたのですが他のエラーが出て解決には至らず、、

ログイン機能の実装に3日もかかってしまっています。
どなたか分かる方いたらアドバイスお願いします。。

また、わからない点がありましたら遠慮なくお願いします。

useUser.js import { useEffect, useState } from 'react' import { useRouter } from 'next/router' import firebase from 'firebase/app' import 'firebase/auth' import initFirebase from '../auth/initFirebase' import { removeUserCookie, setUserCookie, getUserFromCookie, } from './userCookies' import { mapUserData } from './mapUserData' initFirebase() const useUser = () => { const [user, setUser] = useState() const router = useRouter() const logout = async () => { return firebase .auth() .signOut() .then(() => { // Sign-out successful. router.push('/auth') }) .catch((e) => { console.error(e) }) } useEffect(() => { // Firebase updates the id token every hour, this // makes sure the react state and the cookie are // both kept up to date const cancelAuthListener = firebase.auth().onIdTokenChanged((user) => { if (user) { const userData = mapUserData(user) setUserCookie(userData) setUser(userData) } else { removeUserCookie() setUser() } }) const userFromCookie = getUserFromCookie() if (!userFromCookie) { router.push('/') return } setUser(userFromCookie) return () => { cancelAuthListener() } // eslint-disable-next-line react-hooks/exhaustive-deps }, []) return { user, logout } } export { useUser }
FirebaseAuth.js /* globals window */ import { useEffect, useState } from 'react' import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth' import firebase from 'firebase/app' import 'firebase/auth' import initFirebase from '../utils/auth/initFirebase' import { setUserCookie } from '../utils/auth/userCookies' import { mapUserData } from '../utils/auth/mapUserData' // Init the Firebase app. initFirebase() const firebaseAuthConfig = { signInFlow: 'popup', // Auth providers // https://github.com/firebase/firebaseui-web#configure-oauth-providers signInOptions: [ { provider: firebase.auth.EmailAuthProvider.PROVIDER_ID, requireDisplayName: false, }, ], signInSuccessUrl: '/', credentialHelper: 'none', callbacks: { signInSuccessWithAuthResult: async ({ user }, redirectUrl) => { const userData = mapUserData(user) setUserCookie(userData) }, }, } const FirebaseAuth = () => { // Do not SSR FirebaseUI, because it is not supported. // https://github.com/firebase/firebaseui-web/issues/213 const [renderAuth, setRenderAuth] = useState(false) useEffect(() => { if (typeof window !== 'undefined') { setRenderAuth(true) } }, []) return ( <div> {renderAuth ? ( <StyledFirebaseAuth uiConfig={firebaseAuthConfig} firebaseAuth={firebase.auth()} /> ) : null} </div> ) } export default FirebaseAuth
initFirebase.js import firebase from 'firebase/app' import 'firebase/auth' const config = { apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY, authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN, databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL, projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID, storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET, messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID, appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID, } export default function initFirebase() { if (!firebase.apps.length) { firebase.initializeApp(config) } }
検証ツールエラー webpack-internal:///./node_modules/next/dist/client/dev/error-overlay/hot-dev-client.js:283 GET http://localhost:3000/ 500 (Internal Server Error) Uncaught at eval (webpack-internal:///./utils/auth/useUser.js:21:67)

initFirebaseをなくした場合,
API key not validと言われます

initFirebaseをなくした場合のエラー

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

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

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

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

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

guest

回答1

0

自己解決

最初からやり直すことにしました

投稿2020/09/02 05:35

tomsuma

総合スコア38

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問