<h2 id="h8d027c8ed3">はじめに</h2><p>おはようございます。こんにちは。こんばんは。<br>Watatakuです。<br>今回の書いていく内容なんですけれども、タイトルから分かる通り仕様が変わっていました。<br>v8までを使用している方は以前の書き方で大丈夫なのですが、これから新規でfirebaseのプロジェクトを始めるときに書き方が変わりますというお話です。<br>その中でも今回はstorageをやっていきます。<br>storageはcloud storageと呼ばれ、Firebaseが提供している機能の一つで、写真や動画など、ユーザーが作成したコンテンツを保管、提供する必要のあるアプリ デベロッパー向けに構築されています。<br><br>以前はQiitaの方に書かせて頂いたのは仕様が変わる前の記事になっているので、仕様変更前と後の見比べに合わせてご覧ください。<br><a href="https://qiita.com/watataku8911/items/7292a04590aad5b4dd19" target="_blank" rel="noopener noreferrer">https://qiita.com/watataku8911/items/7292a04590aad5b4dd19</a><br></p><h2 id="h3ed8c36a02">画像をアップロードする</h2><pre><code>import { initializeApp } from "firebase/app";
import { getStorage, ref, uploadBytes  } from "firebase/firestore";

const firebaseConfig = {
  apiKey: " process.env.API_KEY",
  authDomain: "process.env.AUTH_DOMAIN",
  projectId: "process.env.PROJECT_ID",
  storageBucket: "process.env.STORAGE_BUCKET",
  messagingSenderId: "process.env.MESSAGING_SENDER_ID",
  appId: "process.env.APP_ID",
  measurementId: "process.env.MEASUREMENT_ID",
};
const app = initializeApp(firebaseConfig);
const storage = getStorage(app);

// ファイルへの参照を作る。
const　imageRef = ref(storage, 'hogehoge.jpg');

// 'file' は Blob または File API から取得される。
uploadBytes(storageRef, file).then((snapshot) =&gt; {
  console.log('アップロードができました');
}).catch(() =&gt; {
  console.log('アップロードができませんでした');
});</code></pre><p>「ファイルへの参照を作る」に関しては下記のように記述するとフォルダとファイルを作れるようになります。</p><pre><code>const　imageRef = ref(storage, 'bowbow/hogehoge.jpg');</code></pre><h2 id="h99197c576f">保存した画像の保存先URLを取得する</h2><p>保存した画像の保存先URLを取得するメソッドは<code>getDownloadURL()</code>を使用します。 </p><pre><code>import { initializeApp } from "firebase/app";
import { getStorage, ref, getDownloadURL } from "firebase/firestore";

const firebaseConfig = {
  apiKey: " process.env.API_KEY",
  authDomain: "process.env.AUTH_DOMAIN",
  projectId: "process.env.PROJECT_ID",
  storageBucket: "process.env.STORAGE_BUCKET",
  messagingSenderId: "process.env.MESSAGING_SENDER_ID",
  appId: "process.env.APP_ID",
  measurementId: "process.env.MEASUREMENT_ID",
};
const app = initializeApp(firebaseConfig);
const storage = getStorage(app);

const　imageRef = ref(storage, 'hogehoge.jpg');
getDownloadURL(imageRef).then((downloadURL) =&gt; {
  console.log(downloadURL);
}).catch(() =&gt; {
  console.log("ダウンロードURLが取得せきませんでした");
});</code></pre><p>この取得した、downloadURLを<strong>firestore</strong>などに保存してやってください。<br><br><a href="https://firebase.google.com/docs/storage/web/start?hl=ja" target="_blank" rel="noopener noreferrer">https://firebase.google.com/docs/storage/web/start?hl=ja</a><br><br><br></p>

注意！！firebaseの仕様が変わってました(storage編)

注意！！firebaseの仕様が変わってました。(firestore編)

<h2 id="h8d027c8ed3">はじめに</h2><p>おはようございます。こんにちは。こんばんは。<br>Watatakuです。<br>今回の書いていく内容なんですけれども、タイトルから分かる通り仕様が変わっていました。<br>v8までを使用している方は以前の書き方で大丈夫なのですが、これから新規でfirebaseのプロジェクトを始めるときに書き方が変わりますというお話です。<br>その中でも今回はauthenticationをやっていきます。<br><br>以前はQiitaの方に書かせて頂いたのは仕様が変わる前の記事になっているので、仕様変更前と後の見比べに合わせてご覧ください。<br><a href="https://qiita.com/watataku8911/items/9f134b44ead087abe68b" target="_blank" rel="noopener noreferrer">https://qiita.com/watataku8911/items/9f134b44ead087abe68b</a><br></p><h2 id="h60abfd515b">authentication</h2><p><a href="https://firebase.google.com/docs/auth/?hl=ja" target="_blank" rel="noopener noreferrer">公式ページ</a><br><br>Firebaseが提供してくれているサービスの１つでFirebase Authentication を使用すると、ユーザーがアプリにログインする際に、<br>メールアドレスとパスワードのログイン、Google ログインや Facebook ログインなどのフェデレーション ID プロバイダなど、複数のログイン方法を使用できるようになります。</p><h3 id="hd854b561c4">ユーザ登録</h3><p>使用するメソッド</p><pre><code>createUserWithEmailAndPassword(authインスタンス, "emailアドレス", "パスワード")</code></pre><p><br></p><pre><code>import { initializeApp } from "firebase/app";
import { createUserWithEmailAndPassword, getAuth } from "firebase/firestore";

const firebaseConfig = {
  apiKey: " process.env.API_KEY",
  authDomain: "process.env.AUTH_DOMAIN",
  projectId: "process.env.PROJECT_ID",
  storageBucket: "process.env.STORAGE_BUCKET",
  messagingSenderId: "process.env.MESSAGING_SENDER_ID",
  appId: "process.env.APP_ID",
  measurementId: "process.env.MEASUREMENT_ID",
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
createUserWithEmailAndPassword(auth, "hoge@gmail.com", "passW0rd")
.then(( userCredential) =&gt; {
  console.log('user created');
  console.log(userCredential)
})
.catch((error) =&gt; {
  alert(error.message)
  console.error(error)
}); </code></pre><p><br></p><h3 id="ha6fec2e82b">ログイン</h3><p>使用するメソッド</p><pre><code>signInWithEmailAndPassword(authインスタンス, "emailアドレス", "パスワード")</code></pre><p><br></p><pre><code>import { initializeApp } from "firebase/app";
import { createUserWithEmailAndPassword, getAuth } from "firebase/firestore";

const firebaseConfig = {
  apiKey: " process.env.API_KEY",
  authDomain: "process.env.AUTH_DOMAIN",
  projectId: "process.env.PROJECT_ID",
  storageBucket: "process.env.STORAGE_BUCKET",
  messagingSenderId: "process.env.MESSAGING_SENDER_ID",
  appId: "process.env.APP_ID",
  measurementId: "process.env.MEASUREMENT_ID",
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
signInWithEmailAndPassword(auth, "hoge@gmail.com", "passW0rd")
.then((user) =&gt; {
  console.log('ログイン成功=', user.user.uid)
})
.catch((error) =&gt; {
  console.error(error)
});</code></pre><p><br></p><h4 id="h217ef38d18">その他のログイン</h4><ul><li>Googleログイン</li></ul><pre><code>import { initializeApp } from "firebase/app";
import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/firestore";

const firebaseConfig = {
  apiKey: " process.env.API_KEY",
  authDomain: "process.env.AUTH_DOMAIN",
  projectId: "process.env.PROJECT_ID",
  storageBucket: "process.env.STORAGE_BUCKET",
  messagingSenderId: "process.env.MESSAGING_SENDER_ID",
  appId: "process.env.APP_ID",
  measurementId: "process.env.MEASUREMENT_ID",
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

const provider = new GoogleAuthProvider();
signInWithPopup(auth, provider)
.then((user) =&gt; {
  console.log('Googleアカウントでログインしました。')
})
.catch((error) =&gt; {
  console.error(error)
});</code></pre><ul><li>Facebookログイン</li></ul><pre><code>import { initializeApp } from "firebase/app";
import { getAuth, signInWithPopup, FacebookAuthProvider } from "firebase/firestore";

const firebaseConfig = {
  apiKey: " process.env.API_KEY",
  authDomain: "process.env.AUTH_DOMAIN",
  projectId: "process.env.PROJECT_ID",
  storageBucket: "process.env.STORAGE_BUCKET",
  messagingSenderId: "process.env.MESSAGING_SENDER_ID",
  appId: "process.env.APP_ID",
  measurementId: "process.env.MEASUREMENT_ID",
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

const provider = new FacebookAuthProvider();
signInWithPopup(auth, provider)
.then((user) =&gt; {
  console.log('Facebookアカウントでログインしました。')
})
.catch((error) =&gt; {
  console.error(error)
});</code></pre><ul><li>Twitterログイン</li></ul><pre><code>import { initializeApp } from "firebase/app";
import { getAuth, signInWithPopup, TwitterAuthProvider } from "firebase/firestore";

const firebaseConfig = {
  apiKey: " process.env.API_KEY",
  authDomain: "process.env.AUTH_DOMAIN",
  projectId: "process.env.PROJECT_ID",
  storageBucket: "process.env.STORAGE_BUCKET",
  messagingSenderId: "process.env.MESSAGING_SENDER_ID",
  appId: "process.env.APP_ID",
  measurementId: "process.env.MEASUREMENT_ID",
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

const provider = new TwitterAuthProvider();
signInWithPopup(auth, provider)
.then((user) =&gt; {
  console.log('Twitterアカウントでログインしました。')
})
.catch((error) =&gt; {
  console.error(error)
});</code></pre><ul><li> Githubログイン</li></ul><pre><code>import { initializeApp } from "firebase/app";
import { getAuth, signInWithPopup, GithubAuthProvider } from "firebase/firestore";

const firebaseConfig = {
  apiKey: " process.env.API_KEY",
  authDomain: "process.env.AUTH_DOMAIN",
  projectId: "process.env.PROJECT_ID",
  storageBucket: "process.env.STORAGE_BUCKET",
  messagingSenderId: "process.env.MESSAGING_SENDER_ID",
  appId: "process.env.APP_ID",
  measurementId: "process.env.MEASUREMENT_ID",
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

const provider = new GithubAuthProvider();
signInWithPopup(auth, provider)
.then((user) =&gt; {
  console.log('Githubアカウントでログインしました。')
})
.catch((error) =&gt; {
  console.error(error)
});</code></pre><p><br></p><h3 id="h5ae5a82600">サインアウト</h3><p>使用するメソッド</p><pre><code>signOut(authインスタンス)</code></pre><p><br></p><pre><code>import { initializeApp } from "firebase/app";
import { createUserWithEmailAndPassword, getAuth } from "firebase/firestore";

const firebaseConfig = {
  apiKey: " process.env.API_KEY",
  authDomain: "process.env.AUTH_DOMAIN",
  projectId: "process.env.PROJECT_ID",
  storageBucket: "process.env.STORAGE_BUCKET",
  messagingSenderId: "process.env.MESSAGING_SENDER_ID",
  appId: "process.env.APP_ID",
  measurementId: "process.env.MEASUREMENT_ID",
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
signOut(auth)
.then((user) =&gt; {
  console.log('ログアウトしました')
})
.catch((error) =&gt; {
  console.log(`ログアウト時にエラーが発生しました (${error})`);
});</code></pre><p><br></p><h3 id="h07516b8bcf">現在ログインしているユーザーを取得する</h3><p>使用するメソッド</p><pre><code>onAuthStateChanged(authインスタンス, () =&gt; {})</code></pre><p><br></p><pre><code>import { initializeApp } from "firebase/app";
import { onAuthStateChanged, getAuth } from "firebase/firestore";

const firebaseConfig = {
  apiKey: " process.env.API_KEY",
  authDomain: "process.env.AUTH_DOMAIN",
  projectId: "process.env.PROJECT_ID",
  storageBucket: "process.env.STORAGE_BUCKET",
  messagingSenderId: "process.env.MESSAGING_SENDER_ID",
  appId: "process.env.APP_ID",
  measurementId: "process.env.MEASUREMENT_ID",
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
onAuthStateChanged(auth, (user) =&gt; {
&nbsp; if (user) {
&nbsp; &nbsp; // User is signed in, see docs for a list of available properties
&nbsp; &nbsp; const uid = user.uid;
&nbsp; &nbsp; // ...
&nbsp; } else {
&nbsp; &nbsp; // User is signed out
&nbsp; &nbsp; // ...
&nbsp; }
});</code></pre><p>あとは、ドキュメントを見て。。。。</p>

T.W

注意！！firebaseの仕様が変わってました(storage編)

注意！！firebaseの仕様が変わってました。(firestore編)

注意！！firebaseの仕様が変わってました。(authentication編)