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

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

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

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

Firebase Authentication

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

ログイン

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

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

React.js

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

Q&A

解決済

1回答

10947閲覧

Firebaseのログイン認証実装したいがYour API key is invalidと表示される

asml

総合スコア1

Firebase

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

Firebase Authentication

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

ログイン

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

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

React.js

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

1グッド

0クリップ

投稿2021/06/19 09:30

実現したいこと

React.jsでアプリを作成しており、
Firebaseでログイン認証の実装をしたいのですが、
「API Keyが無効のため、正しくコピーされているか確認ください」とエラーが表示されます。

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

provider.ts:120 Uncaught t {code: "auth/invalid-api-key", message: "Your API key is invalid, please check you have copied it correctly.", a: null} a: null code: "auth/invalid-api-key" message: "Your API key is invalid, please check you have copied it correctly." __proto__: Error

該当のソースコード

.envファイル

REACT_APP_FIREBASE_API_KEY ="***" REACT_APP_FIREBASE_DOMEIN="***" REACT_APP_FIREBASE_DATABASE="***" REACT_APP_FIREBASE_PROJECT_ID="***" REACT_APP_FIREBASE_STORAGE_BUCKET="***" REACT_APP_FIREBASE_SENDER_ID="***" REACT_APP_FIREBASE_APP_ID="***"

Firebase.js

import firebase from 'firebase/app'; import 'firebase/firestore'; import 'firebase/auth'; var firebaseConfig = { apiKey: process.env.REACT_APP_FIREBASE_API_KEY, authDomain: process.env.REACT_APP_FIREBASE_DOMEIN, databaseURL: process.env.REACT_APP_FIREBASE_DATABASE, projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID, storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET, messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID, appId: process.env.REACT_APP_FIREBASE_APP_ID, }; const initialized_fb = firebase.initializeApp(firebaseConfig); export const auth = initialized_fb.auth() ; export const db = initialized_fb.firestore();

###試したこと
0. Firebaseの管理画面からAPIのKey等の.envファイル内のコードをコピーし直しましたが、このエラーメッセージは消えませんでした。
0. コンポーネント内でimportする際は、以下のように書いています。

import { auth, db } = '../firebase/Firebase';

3..envファイルは .src外のrootに入れています。

どなたかご教示をいただけませんでしょうか。

Teppy👍を押しています

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

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

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

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

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

guest

回答1

2

ベストアンサー

仮に.envファイルが一字一句この構造なのだとしたら、
REACT_APP_FIREBASE_API_KEYを正しく設定できていない気がします。
この部分だけ、キー名に値が入るような構造になってなくて、未指定になっているのでは。

こんな感じになるように直してみては。

diff

1+REACT_APP_FIREBASE_API_KEY="***" 2-REACT_APP_FIREBASE_API_KEY 3-="***" 4REACT_APP_FIREBASE_DOMEIN="***" 5REACT_APP_FIREBASE_DATABASE="***" 6REACT_APP_FIREBASE_PROJECT_ID="***" 7REACT_APP_FIREBASE_STORAGE_BUCKET="***" 8REACT_APP_FIREBASE_SENDER_ID="***" 9REACT_APP_FIREBASE_APP_ID="***"

念の為、Firebase.jsの中でfirebaseConfigを設定後にconsole.log(firebaseConfig)などを行い、
中身を確認してみるといいと思います。

投稿2021/06/19 10:37

attakei

総合スコア2738

asml, Teppy👍を押しています

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

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

asml

2021/06/19 12:17 編集

attakei さん ありがとうございます。解決いたしました! いただいたアドバイスを元にconsole.log(firebaseConfig); してみたところ undefinedとなっており、 .envファイルを再確認したところ、おっしゃる通りAPI_KEY のところに不要なスペースが入っていました。 これが原因でundefined となっていたようです。 本当にありがとうございます!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.54%

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

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

質問する

同じタグがついた質問を見る

Firebase

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

Firebase Authentication

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

ログイン

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

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

React.js

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