magiclabs / magic-js

Magic browser/React Native JavaScript SDK is your entry-point to integrating passwordless authentication inside your application.
https://magic.link/docs/api-reference/client-side-sdks/web
Apache License 2.0
455 stars 85 forks source link

Could not process OAuth request because cookies are malformed, missing, or tampered with. #761

Closed danvincent11 closed 1 month ago

danvincent11 commented 1 month ago

🐛 Description

I'm trying to implement OAuth in my Magic OAuth login, but I'm encountering an error. After selecting an email in Google login, the error message 'Could not process OAuth request because cookies are malformed, missing, or tampered with.' appears.

🧩 Steps to Reproduce

  1. Select Google to log in.
  2. Select an email.
  3. The error message 'Could not process OAuth request because cookies are malformed, missing, or tampered with.' appears. image

🤔 Expected behavior

I expect to be redirected back to my website and receive the user's information.

😮 Actual behavior

An error occurs: 'Could not process OAuth request because cookies are malformed, missing, or tampered with.'

💻 Code Sample

    magic = new Magic(PUBLIC_MAGIC_PUBLISHABLE_KEY, {
    network: customNodeOptions,
    locale: 'en',
    extensions: [new OAuthExtension()]
})

export async function oauthLogin(provider: string): Promise<void> {
try {
    await magic.oauth.loginWithRedirect({
        provider /* 'google', 'facebook', 'apple', or 'github'   */,
        redirectURI:
            'https://auth.magic.link/v1/oauth2/<codeId>=/callback'
    })
    const result = await magic.oauth.getRedirectResult()
    console.log('OAuth: ', result)
} catch (error) {
    console.error(error)
}

}

🌎 Environment

Software Version(s)
magic-sdk ^28.0.7
Browser Chrome Version 126.0.6478.127
npm 8.19.3
Operating System Win 11
danvincent11 commented 1 month ago

Issue fixed Invalid redirectionURI value (it should be page with handleOAuthCallback method) working code await magic.oauth.loginWithRedirect({ provider, redirectURI: '${window.location.origin}' })