MSAL & Reactでログイン処理するも、BrowserAuthError: hash_empty_error
環境
create-react-app 4.0.3
@azure/msal-browser: ^2.20.0
@azure/msal-react: ^1.1.2
現象
公式を参考に、ポップアップによるログイン処理を実装
// MSAL configuration
const configuration: Configuration = {
auth: {
clientId,
authority: `https://login.microsoftonline.com/...`,
},
}
export const pca = new PublicClientApplication(configuration)
...
<Button
fullWidth
variant="contained"
size="large"
sx={{ mt: 3, mb: 2 }}
onClick={() => {
pca
.loginPopup({
prompt: 'select_account',
scopes,
})
.then((r) => {
// 上手く行ったときの処理
})
}}
>
Login
</Button>
ログインは時々成功するも、大抵以下のエラーとなる。
SessionStorage, Cookieに何かあるといったわけでもない。時々うまくいくのが本当に困る。。。
BrowserAuthError: hash_empty_error: Hash value cannot be processed because it is empty.
Please verify that your redirectUri is not clearing the hash.
Given Url: https://siteinspection-dev.azurewebsites.net/login
at t [as constructor] (https://siteinspection-dev.azurewebsites.net/static/js/6.21bce126.chunk.js:2:163177)
at new t (https://siteinspection-dev.azurewebsites.net/static/js/6.21bce126.chunk.js:2:266493)
at Function.t.createEmptyHashError (https://siteinspection-dev.azurewebsites.net/static/js/6.21bce126.chunk.js:2:266991)
at https://siteinspection-dev.azurewebsites.net/static/js/6.21bce126.chunk.js:2:304999
stackOverFlowなどみてもあまり有益な情報がなく、途方にくれる
解決策
loginRedirect()を使う
onClick={() => {
pca
// .loginPopup
.loginRedirect({
prompt: 'select_account',
scopes,
})
どうやらloginPopupには潜在的な問題がある気配。
注意点
loginPopupとloginRedirectでは、以下のようにPromiseで返される返り値が異なる。
| loginPopup | loginRedirect |
|---|---|
| Promise<AuthenticateResult> | Promise<void> |
AuthenticateResultを元に色々処理していた場合は、ロジックを変える必要がある。
(T_T)
Author And Source
この問題について(MSAL & Reactでログイン処理するも、BrowserAuthError: hash_empty_error), 我々は、より多くの情報をここで見つけました https://zenn.dev/nixieminton/articles/6715b5011c4a21著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol