ログイン画面に自動で遷移しない

Question

以前にも質問させていただきましたが、SPAの開発を行っています。
そしてSPAの認証としてAADB2Cを導入しています。
今考えているが認証済みユーザーはURLアクセス後、直接メイン画面に。
もし認証されていないユーザであれば、ログイン画面を表示するという構成を考えています。

現在の開発環境はReact＋Typescriptです。
そしてAADB2Cを使っているため、認証ライブラリはMSALを使用しています。

上記の遷移を満たすためには、MsalAuthenticationTemplateを使えばよいと知りました。
そこでMsalAuthenticationTemplateを組み込み、SPAにアクセスしたのですが、SPAのメイン画面が表示されるわけでも、ログイン画面が
表示されるわけでもなく、何も表示されません。(真っ白な画面)

authConfig.tsの設定が間違っているのでしょうか。
それともAzure ADB2C側でのアプリケーションの設定が間違っているのでしょうか。

github上に現在考えているSPAの簡易的なものを置きましたので、参考にしていただければと思います。
github

宜しくおねがいします。

Answer 1

こんにちは。
拝見させて頂きました。

認証付きSPAを学習し始められたところなのかと思っています。
その上で、以下が少し気になりました。

• AADではなくAADB2Cを使っている
• JSではなくTypeScriptを使っている

どちらも発展の形として良いとは思うのですが、学習を開始された時点で問題を複雑化する要素にもなりえると思います。
まずは、通常のAAD、Reactで以下をベースに基本認証が出来るところまで組み込んでみては如何でしょうか。

https://docs.microsoft.com/ja-jp/azure/active-directory/develop/tutorial-v2-react

それができたのちに、AADをAADB2Cに変更する、JavaScriptをTypeScriptに変更する、など進展させていくほうが進行しやすいかと思いました。（もし既にサンプルを試されていたらすみません）

Comments

[runpapa]

前回の質問に引き続き、ご意見・ご助言ありがとうございます。
感じられている通り、最近認証付きSPAを学び始めたところです。
そのため、順序を踏んで学ぶことが正しい道だとは思っております。
また、アドバイスとして参考に載せていただいているサンプルは一応実装はしました。
ただ、私自身の理解力が乏しく、そこからどう変化させて期待する動きを実装できるかまでは考えることができませんでした、、。
そこで見つけたのがMsalAuthenticationTemplateというものでした。
もし可能であれば、私のコードの問題点を教えていただくことは可能でしょうか。
個人的な考えとしてauthConfigに問題はなく、MsalAuthenticationTemplateの使い方に問題があるのではないと感じていますが、サンプルも少なく戸惑っております。
厚かましい返信となりますが、何卒ご検討よろしくお願いいたします。

[Tak1wa]

>また、アドバイスとして参考に載せていただいているサンプルは一応実装はしました。

そうでしたか。
そのサンプルは期待した動きはしていなかったということでしょうか？