Vite + React + Auth0 の勘所【ハンズオン形式】

この記事では、下記の読者に向けた内容を記載します。

前提
対象者
やること
本文
package.json の設定

前提

Auth0 の公式ドキュメントはかなり詳細に書かれています。
したがって、この記事は公式ドキュメントを見てもよく分からなかった人向けの記事になります。

まだ公式ドキュメントをくわしく見ていない方は、公式ドキュメントの方を先にご一読ください。

各言語別 SDK Quick Starts

Auth0 Authentication Reference

対象者

vite.config.tsの中身について、ベストが分からない方
npm run start のオプションの内容を決めかねている方
公式ドキュメント通りに設定したのに、何故か動作しない方

やること

localhost の書き換え
自己証明書を発行する
vite.config.ts を設定する
package.json の設定を見直す

本文

最初に、Auth0 を使う上で一点だけ注意する必要があります。

開発環境にて、localhost で開発すると auth0 では thrid party app 扱いとなります。
このことから、エラーについて考えることが増えてしまうため、まずは localhost を書き換えます。

localhost の書き換え

Windows + R コマンドを押下して、C:\Windows\System32\drivers\etc\hosts を開きます。

# Copyright (c) 1993-2009 Microsoft Corp.

# 中略

127.0.0.1       tests.com # 👈 この行を追加する

# End of section

これで、localhost を tests.com へと読み替えることが出来るようになりました。

自己証明書の発行手続き

次に、自己証明書を発行します。

ここで発行する理由としては、様々な通信が受信可能になり、セキュリティ上の問題が発生します。
このような状態だと、暗号化が無意味になり、盗聴や改ざんも可能になってしまうからです。

ここでの暗号鍵ファイルの名前については、どのようなものでも構いません。
また、ここでは便宜的に *.pem 拡張子を使用していますが、*.crt や *.key などでも問題ないです。

$ cd {自己証明書を発行したいディレクトリのパス}
$ openssl req -x509 -newkey rsa:4096 -keyout privatekey.pem -out cert.pem -days 365

vite.config.tsの設定

続いて、設定ファイルから自己証明書を参照します。

なお、下記の設定ファイルはオレオレ設定です。
そのほかの必要な設定については、公式ドキュメント（サーバーオプション）を参照してください。

// vite.config.ts の中身
import fs from 'fs';
import { fileURLToPath } from 'url';

import react from '@vitejs/plugin-react';
import vike from 'vike/plugin';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [
        react(),
        vike({ prerender: true })
    ],
    server: {
        origin: 'http://tests.com:3000', // サーバーの起動アドレス
        host: 'tests.com', // ホスト名指定
        open: '/login',
        port: 3000, // ポート番号指定
        cors: true, // CORSを有効化

        https: {
            key: fs.readFileSync('./privatekey.pem'),
            cert: fs.readFileSync('./cert.pem'),
        }, // 👈 自己証明書を参照
    },
    // 後略
});

package.json の設定

ここでは、npm run start 時のオプションを設定します。
先ほど作成した設定ファイルをスクリプトの --cofig オプションで指定するだけです。

{
    "name": "b2bservicemanagement",
    "private": true,
    "version": "0.0.0",
    "type": "module",
    "scripts": {
        "start": "vite --config vite.config.ts", // 👈 同じ階層の vite.config.ts を指定
        // 中略
    },
    "dependencies": {
        // 中略
    },
    "devDependencies": {
        // 中略
    },
}

ここまでで、設定における全体的なものは完了です。
このままでも動くとは思いますが、もし問題があれば公式ドキュメントを参照してください。