Custom auth/alban/react next sample app signin #7624
Conversation
albanx
commented
Mar 8, 2025
albanx
commented
- Completed Sign In sample with NextJs
- [Bug] Created Sign Up but not working due to missing exposure of submitCode in the result.state
- Removed correlationId from Fetch client because it is present already in the header
- Removed HTTPS checks in SDK, it is not needed to be handled by JS and blocks local development
- Add msal-custom-auth to pipeline
This PR is to 1. Add doc to all public components 2. Update index.ts for missing classes
… correlationid agnostic fetch client
…ple-app-signin # Conflicts: # package-lock.json
[Fix] Fix development on local and remove not needed checks, improved…
|
Do you think we can move this sample app into the repo Kaushik suggested? I am planning the create the PR to MSAL for JS team soon for checking in the changes into the dev branch. If it is possible, it is better to exclude the sample app in that PR. |
Yes I have moved them partially, not the last version. Otherwise I cannot run them in the repo until the package is published. |
| setError("Incorrect password"); | ||
| } else { | ||
| setError("An error occurred during sign in"); | ||
| } |
There was a problem hiding this comment.
Maybe I misunderstood, but any reason why you didn't use the handleError function you defined in the utils/index.ts?
| setLoading(true); | ||
|
|
||
| try { | ||
| const result = await flowState.submitCode(code); |
There was a problem hiding this comment.
As discussed earlier, can you double check whether flowState.submitCode(code) is working?
There was a problem hiding this comment.
I have ran the sign in different times, it works, unless there has been some recent updates.
| const [password, setPassword] = useState(""); | ||
| const [code, setCode] = useState(""); | ||
| const [error, setError] = useState(""); | ||
| const [flowState, setFlowState] = useState<any>(null); |
There was a problem hiding this comment.
Do you think it is better to use the state base class AuthFlowStateBase to replace any?
There was a problem hiding this comment.
Or use SignInCompleted | SignInFailed | SignInCodeRequired | SignInPasswordRequired?
There was a problem hiding this comment.
Can be AuthFlowStateBase , the later one I really do not recommend. This is how developer experience will look with the latest:
const [flowState, SetFlowState] = useState< checking docs
I see SignInCompleted , perfect
const [flowState, SetFlowState] = useState<SignInCompleted>(null)
Ahh wait there is more
const [flowState, SetFlowState] = useState<SignInCompleted | SignInFailed>(null)
no wait more types in or
const [flowState, SetFlowState] = useState<SignInCompleted | SignInFailed | SignInCodeRequired >(null)
(how many possible types in OR I should have, I have to check all of them and find out by reading a long boring documentation)
1 month after the SDK releseas version 2.0 ... Ah crap I have to update all my code again
const [flowState, SetFlowState] = useState<SignInCompleted | SignInFailed | SignInCodeRequired | **ANewSignInState** >(null)
if (flowState instanceOf SignInCompleted)
if (flowState instanceOf SignInFailed )
if (flowState instanceOf SignInCodeRequired )
**if (flowState instanceOf ANewSignInState)**
| setLoading(true); | ||
|
|
||
| try { | ||
| const app = await CustomAuthPublicClientApplication.create(customAuthConfig); |
There was a problem hiding this comment.
IMHO, the app can be shared cross the whole application for sign-in, sign-up and sspr. Is it possible we can use the single instance of app in this sample app?
There was a problem hiding this comment.
There is no point and need to share the same app instance for different flows that are not connected in the lifecycle of an app. Imagine Sign Up , Sign In and SSPR as different flows that are separated in time and usage , as it happens in every app (a user does not go through the all flows in the same app cycle). Making this flows sharing the same instance it kind of tight them together for no reason.
| <div style={styles.container}> | ||
| <h2>Sign Up</h2> | ||
| {flowState?.type === SignUpState.CodeRequired ? ( | ||
| <CodeForm onSubmit={handleCodeSubmit} code={code} setCode={setCode} loading={loading} /> |
There was a problem hiding this comment.
May I ask why we don't have the PasswordForm?
There was a problem hiding this comment.
This is SignUp with OTP does not asks for password which I based on the past samples. That is the configuration of the sample tenant. I can add the password field but it will be optional
microsoft-github-policy-service
bot
added
the
Needs: Attention 👋
microsoft-github-policy-service
bot
removed
the
Needs: Attention 👋
