Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix msal-react SSR hydration errors #5399

Merged
merged 4 commits into from
Nov 21, 2022
Merged

Fix msal-react SSR hydration errors #5399

merged 4 commits into from
Nov 21, 2022

Conversation

tnorling
Copy link
Collaborator

When attempting to use msal-react in an SSR app it results in hydration errors when a using MsalAuthenticationTemplate or useIsAuthenticated. This PR fixes this behavior by defaulting the value of useIsAuthenticated to false when inProgress is Startup (which it will always be server-side and on the first render client-side)

@github-actions github-actions bot added the msal-react Related to @azure/msal-react label Nov 17, 2022
@codecov-commenter
Copy link

Codecov Report

Merging #5399 (4515c27) into dev (42e1baf) will increase coverage by 0.01%.
The diff coverage is 100.00%.

Flag Coverage Δ *Carryforward flag
msal-angular 96.50% <ø> (ø) Carriedforward from 42e1baf
msal-browser 86.47% <100.00%> (ø) Carriedforward from 42e1baf
msal-common 85.45% <ø> (ø) Carriedforward from 42e1baf
msal-core 82.84% <ø> (ø) Carriedforward from 42e1baf
msal-node 83.37% <ø> (ø) Carriedforward from 42e1baf
msal-node-extensions 76.03% <ø> (ø) Carriedforward from 42e1baf
msal-react 94.68% <100.00%> (+0.18%) ⬆️
node-token-validation 88.88% <ø> (ø) Carriedforward from 42e1baf

*This pull request uses carry forward flags. Click here to find out more.

Impacted Files Coverage Δ
lib/msal-browser/src/index.ts 100.00% <100.00%> (ø)
lib/msal-react/src/hooks/useIsAuthenticated.ts 100.00% <100.00%> (ø)
lib/msal-react/src/hooks/useMsalAuthentication.ts 92.55% <100.00%> (+0.50%) ⬆️

Copy link
Collaborator

@jo-arroyo jo-arroyo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Was this addressing an issue opened by a customer, or something you noticed?

@tnorling
Copy link
Collaborator Author

LGTM. Was this addressing an issue opened by a customer, or something you noticed?

It was brought to my attention in a Discussions post as well as in our Teams channel

@tnorling tnorling enabled auto-merge (squash) November 21, 2022 19:08
@tnorling tnorling merged commit b6454bd into dev Nov 21, 2022
@tnorling tnorling deleted the fix-react-ssr branch November 21, 2022 19:13
@ghost
Copy link

ghost commented Nov 22, 2022

🎉@azure/msal-react@v1.5.0 has been released which incorporates this pull request.:tada:

Handy links:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
msal-react Related to @azure/msal-react
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants