feat: add mfa events to oauth flows#1035
Open
sherzod-bakhodirov wants to merge 10 commits intomasterfrom
Open
Conversation
There was a problem hiding this comment.
Pull request overview
Adds MFA-related event support to OAuth popup and redirect flows by introducing shared OAuth MFA event types, wiring those events through the oauth2 extension and wallet-kit extension, and updating wallet-kit UI/state management to drive MFA and recovery-code screens during OAuth login.
Changes:
- Introduce shared OAuth MFA event enums/handler typings and include them in intermediary event unions.
- Add
showUIoption and MFA event wiring to@magic-ext/oauth2popup + redirect result flows. - Refactor wallet-kit OAuth login to use a new
OAuthLoginContext+useMfahook and update the wallet-kit extension OAuth popup flow to emit MFA events.
Reviewed changes
Copilot reviewed 13 out of 14 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| yarn.lock | Bumps workspace dependency ranges (notably @magic-sdk/provider / RN packages). |
| packages/@magic-sdk/types/src/modules/oauth-types.ts | Adds shared OAuth MFA event enums and composes them into popup/redirect handler types. |
| packages/@magic-sdk/types/src/modules/intermediary-types.ts | Extends IntermediaryEvents to include new OAuth MFA event strings. |
| packages/@magic-ext/wallet-kit/src/views/RecoveryCode.tsx | Switches recovery-code submission to the new useMfa() routing hook. |
| packages/@magic-ext/wallet-kit/src/views/OAuthPendingView.tsx | Moves OAuth login initiation to OAuthLoginContext and simplifies pending UI state. |
| packages/@magic-ext/wallet-kit/src/views/MfaView.tsx | Switches MFA actions to the new useMfa() routing hook. |
| packages/@magic-ext/wallet-kit/src/hooks/useOAuthLogin.ts | Removes the old standalone OAuth login hook in favor of context-based flow. |
| packages/@magic-ext/wallet-kit/src/hooks/useMfa.ts | Adds a routing hook that selects OAuth vs email MFA handlers based on active flow. |
| packages/@magic-ext/wallet-kit/src/extension.ts | Updates loginWithPopup to return a PromiEvent and forward MFA intermediary events. |
| packages/@magic-ext/wallet-kit/src/context/index.ts | Exports the new OAuthLoginProvider / useOAuthLogin. |
| packages/@magic-ext/wallet-kit/src/context/OAuthLoginContext.tsx | Adds context to manage OAuth login PromiEvent lifecycle and MFA event dispatching. |
| packages/@magic-ext/wallet-kit/src/MagicWidget.tsx | Wraps widget with OAuthLoginProvider to enable OAuth MFA flows. |
| packages/@magic-ext/oauth2/src/types.ts | Adds showUI?: boolean to popup + verification configurations. |
| packages/@magic-ext/oauth2/src/index.ts | Wires MFA events into OAuth popup + redirect result flows and refactors redirect-result parsing into a method. |
Comments suppressed due to low confidence (1)
packages/@magic-ext/oauth2/src/index.ts:105
showUIis optional, but the checks useif (!showUI)which treatsundefinedthe same asfalse. That changes the default behavior for existing callers that don’t passshowUI(they’ll now get the no-UI/MFA event wiring path). Consider defaultingshowUItotruevia destructuring (const { showUI = true } = ...) or gating onshowUI === false.
public loginWithPopup(configuration: OAuthPopupConfiguration) {
const { showUI } = configuration;
const requestPayload = this.utils.createJsonRpcRequestPayload(OAuthPayloadMethods.Popup, [
{
...configuration,
returnTo: window.location.href,
apiKey: this.sdk.apiKey,
platform: 'web',
},
]);
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 13 out of 14 changed files in this pull request and generated 8 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
packages/@magic-ext/wallet-kit/src/context/OAuthLoginContext.tsx
Outdated
Show resolved
Hide resolved
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…ss-mfa-flow-for-oauth-magic-widget
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📦 Pull Request
[Provide a general summary of the pull request here.]
✅ Fixed Issues
🚨 Test instructions
[Describe any additional context required to test the PR/feature/bug fix.]
Please 🚨 ONLY ADD ONE 🚨 of the following labels, failing to do so may lead to adverse versioning of your changes when published:
patch: Bug Fix?minor: New Feature?major: Breaking Change?skip-release: It's unnecessary to publish this change.Special Note
Please avoid adding any of the
Prioritylabels as they conflict with the labels above ☝️📦 Published PR as canary version:
Canary Versions✨ Test out this PR locally via:
npm install @magic-ext/algorand@28.3.2-canary.1035.22221112203.0 npm install @magic-ext/aptos@16.3.2-canary.1035.22221112203.0 npm install @magic-ext/avalanche@28.3.2-canary.1035.22221112203.0 npm install @magic-ext/bitcoin@28.3.2-canary.1035.22221112203.0 npm install @magic-ext/conflux@26.3.2-canary.1035.22221112203.0 npm install @magic-ext/cosmos@28.3.2-canary.1035.22221112203.0 npm install @magic-ext/ed25519@24.3.2-canary.1035.22221112203.0 npm install @magic-ext/evm@1.2.2-canary.1035.22221112203.0 npm install @magic-ext/farcaster@5.3.2-canary.1035.22221112203.0 npm install @magic-ext/flow@28.3.2-canary.1035.22221112203.0 npm install @magic-ext/gdkms@16.3.2-canary.1035.22221112203.0 npm install @magic-ext/harmony@28.3.2-canary.1035.22221112203.0 npm install @magic-ext/hedera@2.2.2-canary.1035.22221112203.0 npm install @magic-ext/icon@28.3.2-canary.1035.22221112203.0 npm install @magic-ext/kadena@5.3.2-canary.1035.22221112203.0 npm install @magic-ext/near@28.3.2-canary.1035.22221112203.0 npm install @magic-ext/oauth2@15.3.2-canary.1035.22221112203.0 npm install @magic-ext/oidc@16.3.2-canary.1035.22221112203.0 npm install @magic-ext/polkadot@28.3.2-canary.1035.22221112203.0 npm install @magic-ext/react-native-bare-oauth@30.3.2-canary.1035.22221112203.0 npm install @magic-ext/react-native-expo-oauth@30.3.2-canary.1035.22221112203.0 npm install @magic-ext/siwe@3.3.2-canary.1035.22221112203.0 npm install @magic-ext/solana@30.3.2-canary.1035.22221112203.0 npm install @magic-ext/sui@5.3.2-canary.1035.22221112203.0 npm install @magic-ext/taquito@25.3.2-canary.1035.22221112203.0 npm install @magic-ext/terra@25.3.2-canary.1035.22221112203.0 npm install @magic-ext/tezos@28.3.2-canary.1035.22221112203.0 npm install @magic-ext/wallet-kit@0.5.1-canary.1035.22221112203.0 npm install @magic-ext/webauthn@27.3.2-canary.1035.22221112203.0 npm install @magic-ext/zilliqa@28.3.2-canary.1035.22221112203.0 npm install @magic-sdk/provider@33.4.2-canary.1035.22221112203.0 npm install @magic-sdk/react-native-bare@34.2.2-canary.1035.22221112203.0 npm install @magic-sdk/react-native-expo@34.2.2-canary.1035.22221112203.0 npm install @magic-sdk/types@27.4.1-canary.1035.22221112203.0 npm install magic-sdk@33.4.2-canary.1035.22221112203.0 # or yarn add @magic-ext/algorand@28.3.2-canary.1035.22221112203.0 yarn add @magic-ext/aptos@16.3.2-canary.1035.22221112203.0 yarn add @magic-ext/avalanche@28.3.2-canary.1035.22221112203.0 yarn add @magic-ext/bitcoin@28.3.2-canary.1035.22221112203.0 yarn add @magic-ext/conflux@26.3.2-canary.1035.22221112203.0 yarn add @magic-ext/cosmos@28.3.2-canary.1035.22221112203.0 yarn add @magic-ext/ed25519@24.3.2-canary.1035.22221112203.0 yarn add @magic-ext/evm@1.2.2-canary.1035.22221112203.0 yarn add @magic-ext/farcaster@5.3.2-canary.1035.22221112203.0 yarn add @magic-ext/flow@28.3.2-canary.1035.22221112203.0 yarn add @magic-ext/gdkms@16.3.2-canary.1035.22221112203.0 yarn add @magic-ext/harmony@28.3.2-canary.1035.22221112203.0 yarn add @magic-ext/hedera@2.2.2-canary.1035.22221112203.0 yarn add @magic-ext/icon@28.3.2-canary.1035.22221112203.0 yarn add @magic-ext/kadena@5.3.2-canary.1035.22221112203.0 yarn add @magic-ext/near@28.3.2-canary.1035.22221112203.0 yarn add @magic-ext/oauth2@15.3.2-canary.1035.22221112203.0 yarn add @magic-ext/oidc@16.3.2-canary.1035.22221112203.0 yarn add @magic-ext/polkadot@28.3.2-canary.1035.22221112203.0 yarn add @magic-ext/react-native-bare-oauth@30.3.2-canary.1035.22221112203.0 yarn add @magic-ext/react-native-expo-oauth@30.3.2-canary.1035.22221112203.0 yarn add @magic-ext/siwe@3.3.2-canary.1035.22221112203.0 yarn add @magic-ext/solana@30.3.2-canary.1035.22221112203.0 yarn add @magic-ext/sui@5.3.2-canary.1035.22221112203.0 yarn add @magic-ext/taquito@25.3.2-canary.1035.22221112203.0 yarn add @magic-ext/terra@25.3.2-canary.1035.22221112203.0 yarn add @magic-ext/tezos@28.3.2-canary.1035.22221112203.0 yarn add @magic-ext/wallet-kit@0.5.1-canary.1035.22221112203.0 yarn add @magic-ext/webauthn@27.3.2-canary.1035.22221112203.0 yarn add @magic-ext/zilliqa@28.3.2-canary.1035.22221112203.0 yarn add @magic-sdk/provider@33.4.2-canary.1035.22221112203.0 yarn add @magic-sdk/react-native-bare@34.2.2-canary.1035.22221112203.0 yarn add @magic-sdk/react-native-expo@34.2.2-canary.1035.22221112203.0 yarn add @magic-sdk/types@27.4.1-canary.1035.22221112203.0 yarn add magic-sdk@33.4.2-canary.1035.22221112203.0