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

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

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

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

Firebase Authentication

Firebase Authenticationは、Firebaseを利用したユーザーの認証機能です。バックエンドサービス、SDK、アプリでのユーザー認証に使用できるUIライブラリが用意されています。

Q&A

解決済

1回答

2405閲覧

Firebase Authentication を使用してGoogleアカウントでログインをできるようにしたい

takaya14

総合スコア7

Firebase

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

Firebase Authentication

Firebase Authenticationは、Firebaseを利用したユーザーの認証機能です。バックエンドサービス、SDK、アプリでのユーザー認証に使用できるUIライブラリが用意されています。

0グッド

0クリップ

投稿2022/11/24 09:39

前提

Firebase ウェブ Codelabの公式ドキュメントに沿いながらFriendly Chatというウェブアプリケーションを作成しています。その中で、Firebase Authentication を使用してユーザーを認証しようとしております。
しかし、現状ログインボタンを押しても何も反応せずログインできない状態になっております。

実現したいこと

Firebase Authentication を使用してgoogle accountでログインできるようにする。

発生している問題・エラーメッセージ

Uncaught FirebaseError: Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options). at initializeApp (index.esm2017.js?8a30:423:1) at getApp (index.esm2017.js?8a30:476:1) at getAuth (index-0bb4da3b.js?d0d7:9497:30) at initFirebaseAuth (index.js?b635:66:29) at eval (index.js?b635:348:1) at ./src/index.js (main.js:159:1) at __webpack_require__ (main.js:263:41) at main.js:304:37 at main.js:306:12

該当のソースコード

firebase

1/** 2 * To find your Firebase config object: 3 * 4 * 1. Go to your [Project settings in the Firebase console](https://console.firebase.google.com/project/_/settings/general/) 5 * 2. In the "Your apps" card, select the nickname of the app for which you need a config object. 6 * 3. Select Config from the Firebase SDK snippet pane. 7 * 4. Copy the config object snippet, then add it here. 8 */ 9 10const config = { 11 apiKey: "", 12 authDomain: "", 13 projectId: "", 14 storageBucket: "", 15 messagingSenderId: "", 16 appId: "" 17}; 18 19export function getFirebaseConfig() { 20 if (!config || !config.apiKey) { 21 throw new Error('No Firebase configuration object provided.' + '\n' + 22 'Add your web app\'s configuration object to firebase-config.js'); 23 } else { 24 return config; 25 } 26}
'use strict'; import { initializeApp } from 'firebase/app'; import { getAuth, onAuthStateChanged, GoogleAuthProvider, signInWithPopup, signOut, } from 'firebase/auth'; import { getFirestore, collection, addDoc, query, orderBy, limit, onSnapshot, setDoc, updateDoc, doc, serverTimestamp, } from 'firebase/firestore'; import { getStorage, ref, uploadBytesResumable, getDownloadURL, } from 'firebase/storage'; import { getMessaging, getToken, onMessage } from 'firebase/messaging'; import { getPerformance } from 'firebase/performance'; import { getFirebaseConfig } from './firebase-config.js'; // Signs-in Friendly Chat. async function signIn() { // Sign in Firebase using popup auth and Google as the identity provider. var provider = new GoogleAuthProvider(); await signInWithPopup(getAuth(), provider); } // Signs-out of Friendly Chat. function signOutUser() { // Sign out of Firebase. signOut(getAuth()); } // Initialize firebase auth function initFirebaseAuth() { // Listen to auth state changes. onAuthStateChanged(getAuth(), authStateObserver); } // Returns the signed-in user's profile Pic URL. function getProfilePicUrl() { return getAuth().currentUser.photoURL || '/images/profile_placeholder.png'; } // Returns the signed-in user's display name. function getUserName() { return getAuth().currentUser.displayName; } // Returns true if a user is signed-in. function isUserSignedIn() { return !!getAuth().currentUser; } initFirebaseAuth(); loadMessages(); const firebaseAppConfig = getFirebaseConfig(); initializeApp(firebaseAppConfig);

上記のファイルはindex.jsとなります。
自分が変更した部分以外は省略させていただきました。

試したこと

上記のファイルに
import { initializeApp } from "firebase/app";を追加してみたりしましたが、
エラー内容が増えるのみでした。

補足情報(FW/ツールのバージョンなど)

Mac(M1)
firebase --version 11.16.1
[サンプルコード](git clone https://github.com/firebase/codelab-friendlychat-web)はこちらから
見ることができます。

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

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

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

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

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

guest

回答1

0

ベストアンサー

呼び出しの順番が問題かもしれません。
Firebaseの関数を使うまえに初期化しておく必要があるため

const firebaseAppConfig = getFirebaseConfig(); initializeApp(firebaseAppConfig); initFirebaseAuth(); loadMessages();

のように、先にinitializeApp()してみたらうまくいきますでしょうか?

投稿2022/12/10 18:14

ams2020

総合スコア124

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問