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

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)まで♪

参考にしたサイト様

Originally published at www.memory-lovers.blog
ツイッターでシェア
みんなに共有、忘れないようにメモ

きらぷか@i18n補助ツール『トランスノート』開発者

フリーエンジニア/今はNuxt.js/いつかFlutter 受託&アプリ/Webサービス/ゲームを #個人開発 CS修士→SIer/R&D→フリー #paiza はAランクで満足/AtCoderしたい 仕事依頼やご相談はDMまで Kotlin/Python/Swift/Unity/Java/Haskell/DDD

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント