NuxtのSSRで認証したいなと思ったら、こんな記事を見つけたので、試してみたときの備忘録。

SSRモードのNuxtでのFirebase認証 - Qiita

結果、UIDは取得できるけど、firebase-adminで検証が必要っぽい...

インストール

cookieを扱うライブラリはいろいろあるけど、
universal-cookieがよさそうだったので、これを使ってみる。

$ npm install universal-cookie jwt-decode

使い方

import { IncomingMessage } from "http";
import firebase from "firebase
import jwtDecode from "jwt-decode";
import Cookies from "universal-cookie";

const KEY_TOKEN = "access_token";

/**
 * firebase.Userからトークンを取得して、Cookieに保存
 */
export async function setCookie(currentUser: firebase.User) {
  // firebase.UserからidTokenを取得
  const token = await currentUser.getIdToken(true);

  // 新規追加するときは、引数なしでnew Cookies()
  const cookies = new Cookies();
  //  Cookieに保存
  cookies.set(KEY_TOKEN, token);
}

/**
 * Cookieにあるトークンをデコードして、UIDを取得
 */
export function getCookie(req: IncomingMessage) {
  if (process.server && process.static) return;
  if (!req.headers.cookie) return;

  // requestヘッダーのCookieを取得する場合は、引数に追加
  const cookie = new Cookies(req.headers.cookie);
  const token = cookie.get(KEY_TOKEN);
  if (!token) return;

  // jwtDecodeでトークンをデコードする
  const decodedToken = jwtDecode(token);
  if (!decodedToken) return;

  return decodedToken.user_id;
}

以上!!

こんなのつくってます!!

積読用の読書管理アプリ 『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪

参考にしたサイト様

• SSRモードのNuxtでのFirebase認証 - Qiita
• cookie-universal/packages/cookie-universal-nuxt at master · microcipcip/cookie-universal
• js-cookie/js-cookie: A simple, lightweight JavaScript API for handling browser cookies
• Vue.js / Nuxt.js で Cookies を isomorphic に扱えるライブラリを作った - Qiita
• Nuxt.jsでCookieを使って閲覧したデータを取得する方法 - Qiita
• Nuxt.js プロジェクトで便利だったモジュール・テクニックなど - Qiita
• Nuxt.js SSR で Cookieが送られない - Qiita
• Nuxt.jsを用いたプロダクト開発を通して得た知見 - ログミーTech
• Nuxt JS: Keep user logged in with Firebase Auth and also fetch the necessary User data from Cloud Firestore and put it in your Vuex store if the user is already logged in before rendering the page