くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > Nuxt.js > NuxtでFirebase AuthのトークンをCookieに入れたり出したりする

NuxtでFirebase AuthのトークンをCookieに入れたり出したりする

Nuxt.js Vue.js Cookie Firebase

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;
}

以上!!

参考にしたサイト様