【Next.js】FirebaseのAuthenticationで登録したユーザー情報を描画する

f:id:nekorokkekun:20190925144437p:plain:w1000
前回の記事では、Next.jsにFirebaseのAuthenticationを使ってユーザー登録機能を追加しました。
nekorokkekun.hatenablog.com

そこで「登録したユーザーの情報を動的に描画するマイページ」を作りましょう。

前提
ユーザー情報の取得
firebase.auth().currentUserの中身

前提

先ほどもご紹介した前回の記事でログイン機能とHOCの実装まではコピペでも構わないので済ませておいてください。
nekorokkekun.hatenablog.com

ユーザー情報の取得

とは言っても書き方はとても簡単です。

pages/dashboard.js

import React from 'react';
import withAuth from "../src/helpers/withAuth";
// firebaseをimport
import { firebase, auth } from "../src/firebase";

class Dashboard extends React.Component {
    render() {
　　//  firebase.auth().currentUserでログインユーザーの情報が取得可能
        const user = firebase.auth().currentUser;
        return(
            <div>
            <h2>アカウント情報</h2>
            <h4>アカウント名</h4>
            {user.displayName}
            <h4>メールアドレス</h4>
            <p>
            {user.email}　
            </p>
            <img src={user.photoURL} />
            </div>
        )
    }

}
export default withAuth(Dashboard);