🔑

Firebase HostingでBasic認証をかける ~TypeScript編~

2021/08/19に公開約2,100字

開発中だから見られたくない、特定の人にだけ見せたいなどで簡単に認証かけたいとなるとBasic認証である。

Firebase HostingでもCloud Functionsと連携すれば実現できる。

ググるといっぱい出てくるが...

https://www.google.com/search?q=firebase+hosting+basic認証

なぜかCloud FunctionsはJavaScriptベースしか出てこなかった。
TypeScriptでやろうとしてちょっとハマったので共有していく。

手順

とは言え特別にやることはない。

ステップ 1

TypeScriptでも使えるBasic認証のパッケージを入れる。
express-basic-auth - npm

npm i express-basic-auth

ステップ 2

Firebase Hostingデフォルトのpublic/index.htmlを削除して空にする。
ただし、publicディレクトリ自体は必要なので.gitkeep作って消えないようにしておく。

ステップ 3

Basic認証かけたいページの諸々をfunctions/web/に配置する。
名称はwebじゃなくてもなんでもいいが、後述のfunctions/src/index.ts中で参照しているのと同じ名前にしよう。

ステップ 4

次のように、Functionsの/appにリクエストが来たら認証挟んでfunctions/web/index.htmlをレスポンスするように実装する。

functions/src/index.ts
import * as functions from "firebase-functions";
import * as express from "express";
import * as path from "path";
import * as basicAuth from "express-basic-auth";

const app = express();
app.use(
  basicAuth({
    challenge: true,
    users: {
      admin: "admin",
    },
  })
);
app.use(express.static(path.join(__dirname, "../", "web")));

app.use((req, res) => {
  res.sendFile(path.join(__dirname, "../", "web", "index.html"));
});

exports.app = functions.https.onRequest(app);

ステップ 5

rewritesを追加する。

firebase.json
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+   "rewrites": [
+     {
+       "source": "**",
+       "function": "app"
+     }
    ]
  },

ステップ 6

firebase deploy

最終的にはこのような構成になる

/hoge/
|--firebase.json
|
|-- functions
|   |-- web
|   |   `-- index.html
|   `-- src
|       `-- index.ts
`-- public
    `-- .gitkeep

まとめ

これでめでたくBasic認証かけられた。
静的なページはもちろん、Flutter WebなどのSPAでも問題ない。

が、これって毎回Cloud Functions叩く事になるので遅いし、Cloud Functionsの実行コストもかかるので実用的かと言われると

GitHubで編集を提案

Discussion

ログインするとコメントできます