feat: 認証機構導入、いくつかでもページ作成 #115
Conversation
viola-bot
bot
added
add/TODO
diff/XXL
| @@ -0,0 +1,17 @@ | |||
| ## googleapis/google-auth-library-nodejs awsclient.ts | |||
There was a problem hiding this comment.
awsclient.ts をコピペして改造したのでライセンス明記しています
| env_file: | ||
| - ./.env | ||
| working_dir: /opt/workspace | ||
| command: firebase emulators:start --only=auth --project=emulator --import=seeder |
There was a problem hiding this comment.
起動コマンドが以前と少し違います。ログインは必要ありません。トンネルでも使えると思います
There was a problem hiding this comment.
詳細理解できてないけど、私がセットアップしたときにはオフライン対応わからなくて諦めたんだよなー
これは非常にありがたい
| const auth = getCachedApp({ env, logger }).auth() | ||
| // 5 days | ||
| const expiresIn = 60 * 60 * 24 * 5 * 1000 | ||
| const sessionCookie = await auth.createSessionCookie(idToken, { expiresIn }) |
There was a problem hiding this comment.
日数は要相談ですが、5 days でもワンクリックでログインできるのでそんなに大変でもないです
There was a problem hiding this comment.
長期のセッション保存を大手に任せて、自分側では短くするというのは方針としては正しいと思っている
あまり長くすると、GitHub 側で revoke session してもずっと入れてしまうのでこれでも長いくらいか
There was a problem hiding this comment.
個人的にはサイトを開いている間自動でリフレッシュしてくれればトークンは短命でもいい
| @@ -0,0 +1,55 @@ | |||
| import { Portal } from '@violet/web/src/components/atoms/Portal' | |||
There was a problem hiding this comment.
cardmodal
modal のリファクタリング。かなり適当ではありますが、とりあえず最低限。
Card は molecules に移せるかもということでこの命名。
| onClose?: () => void | ||
| } | ||
|
|
||
| export const CardModal: React.FC<Props> = ({ open, children, onClose }: Props) => { |
There was a problem hiding this comment.
open は prop で渡したほうがよいかなと思います。 1. HTML 標準に合わせる 2. たぶんアニメーションを CSS の範囲外のことをしようとしたときに柔軟に対応できるのはこっちの書き方
There was a problem hiding this comment.
- 親側の複雑度が1減る
- フェードアウトアニメーションが実装できる
という利点もあるのでPropsで制御するのは良い
| @@ -11,7 +11,7 @@ const InputFormProject = styled.form` | |||
| justify-content: center; | |||
| ` | |||
|
|
|||
| export const ProjectNameInput = (props: { inputCompleted: () => void }) => { | |||
| export const ProjectNameInput = (props: { onComplete?: () => void }) => { | |||
There was a problem hiding this comment.
細かいリネーム。 on... 使う、 => void という形式にして、 optional にする、といった統一をすると良いかも
@maihrs55 @shuheiest
| border: none; | ||
| border-radius: 16px; | ||
| ` | ||
|
|
There was a problem hiding this comment.
一箇所だけコメントのこします。 SecondaryButton は Button を先にatom にして molecules においたほうがいいやつかな。ちょっと全部にベタ書きして雑にやりましたが… Column も同様です
There was a problem hiding this comment.
教育観点を除けば、実際に再利用するときまでべた書きで良いと思っている
200行ルールだけ気を付ければ後からコンポーネント分割に苦労することは経験的にほぼない
There was a problem hiding this comment.
実際に再利用するときまでべた書き
これはよくやりますね。単純にこの PR でやると詰め込み過ぎなのと、あまりフロントエンドまで手が回らないのでおまかせしたい。
| "target": "es5", | ||
| "lib": ["dom", "dom.iterable", "esnext"], | ||
| "baseUrl": ".", |
There was a problem hiding this comment.
'src/...' の形式で import できていたのはこれです。 別にいいと思いますが jest 側のエラーが出たので @violet/web/src/... で一旦統一
| it.skip('matches snapshot', async () => { | ||
| const { asFragment, findByText } = render( | ||
| <> | ||
| <ApiProvider> |
There was a problem hiding this comment.
テストするなら (場合によってはモックした) Provider をセットしてあげる必要がありますが、どちらにせよこのままだと Auth 関連で動かないので skip
| if (typeof window === 'undefined') return null | ||
| if (process.env.NODE_ENV === 'production') return createAuth() | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any -- prevent HMR | ||
| return ((window as any)._firebase_auth = (window as any)._firebase_auth ?? createAuth()) |
There was a problem hiding this comment.
HMR 環境でキャッシュさせるにはこうする必要があります
prisma のドキュメント で見かけたのを参考にした
上動かないかも、これだけちょっと解決します… |
|
|
| // その後、Firebase Admin Library で使える形にする | ||
| // ExternalAccountClient や AwsClient を直接使わないのは、これらが instance metadata にしか対応していないため | ||
|
|
||
| /* eslint-disable max-lines,@typescript-eslint/no-explicit-any */ |
There was a problem hiding this comment.
max-linesを無効にしているのは今後200行超える予定があるとか？
There was a problem hiding this comment.
失礼しました、消し忘れです！ resolved by f7c0648
pkg/web/src/contexts/Auth.tsx
Outdated
| photoURL: string | ||
| displayName: string | ||
| const focusRefreshIntervalMilliseconds = 1000 * 60 * 5 | ||
| const autoRefreshIntervalMilliseconds = 1000 * 60 * 60 |
There was a problem hiding this comment.
うーん。普通に SWR でいい気がしてきた。申し訳ない、ちょっと調整します
There was a problem hiding this comment.
resolved by 47b6596
- ローカルで使用感が変わらないことを確認
There was a problem hiding this comment.
- プレビュー環境も確認
オッケーです！
| useEffect(() => { | ||
| setCurrentUser({ photoURL: '', displayName: '' }) | ||
| }, []) | ||
| const initialized = useMemo(() => userClaims !== undefined, [userClaims]) |
There was a problem hiding this comment.
useAuth の使用者に !== undefined とさせることもできますが、ライブラリが undefined と null の意味が違う API を露出させるとバグを不用意に増やしそうなので、ライブラリ側で分離
|
毎度ながら素晴らしい仕事ぶり |
|
どうなるかはわからんが Google Auth Library への PR 作ってみた。 |
|
めっちゃ丁寧なPRだ |
|
関連 issue をもう一つ作った: googleapis/google-auth-library-nodejs#1322 |
ℹ️ Info for dev
/dev/auth/...にあるデモを参照してください。Changes
src/web/...系はbaseUrlを消して禁止に。jest でトラブったので (おそらくちゃんと設定すれば問題ないとは思いますが)frourio --watchが消えてしまっていたので復帰。ただ、 frourio そのままだと無限ループになってか JS Stack trace (heap out of memory などのやつ) が起こるonchangeで最低限のものだけ見るようにしたfirebase-adminとその周辺はバックエンド側のクライアントfirebaseとその周辺はフロントエンド側のクライアントpkg/api/src/service/firebase-admin周辺でfirebase-admin <-- simple convert --> google-auth-library <-- workload identity federation --> @aws-sdk/credential-providers { fromContainerCredentials }とつないでいるgoogle-auth-library側に提案できそうgoogle-auth-library:google-cloud-node@aws-sdk/credential-providersfirebase-adminの内部でも使われているが、このパスだとかんたんな形ではうまくいかない/api/auth/session:POST: id token を渡して検証し、セッションをクッキーに (サインイン)/api/auth/session:DELETE: セッションをクッキーから削除 (サインアウト)/api/auth/user:GET: ユーザークレームを取得sub) と関連付けたデータを DB に保存して、別のルート (/api/userなど) で返してください/api/csrf:GET: CSRF トークン取得。 CSRF シークレットをクッキーにセットするのもここで行われているuseApi()内で一番最初に叩かれる。useAspidaSWRは csrf なしの状態でキャッシュされてしまうがここは問題ないbin/...の JS エントリーポイントをなくした。TS でrequire()を使って順序保証/dev/...というルートを web, api ともに作成、コピペ用。ずっと役立ちそうだから CD ビルド時に消すか、ロードバランサで蹴ってずっと残せるのを検討中デモ
スクリーンキャスト: GitHub OAuth 認証使うデモ
スクリーンキャスト: エミュレータでメール認証使うデモ
issues