[Error] Using social login leads to Error on Flutter

[AlphaByte-RedTeam]

Problem

I'm using Flutter 3.7.0-1.2.pre • channel beta, magic_sdk: ^0.3.0 and magic_ext_oauth: ^0.1.0 to implement social login, login with SMS and login with magic link. But I encounter some issues. When I try to use social login method by followin the official docs in Magic's website, I get an error message that looks like the following,

Steps to Reproduce

1. Add magic_sdk: ^0.3.0 and magic_ext_oauth: ^0.1.0 to your flutter dependencies in pubspec.yaml file
2. Run flutter pub get
3. Implement the .loginWithPopup() in your Flutter project. For my case, here's my minimal code:

   SocialButton(
   iconPath: Assets.illustrations.thirdParty.google.path,
   onPressed: () async {
   const redirectUri = 'https://auth.magic.link/v1/oauth2/hgXj1yYu36o9ATczvVweV2eWqUpvbLX7YhsuszEpMO8=/callback';
   var googleConfig = OAuthConfiguration(
     provider: OAuthProvider.GOOGLE,
     redirectURI: redirectUri,
   );
   await magic.oauth.loginWithPopup(googleConfig);
   },
   )

   Where SocialButton() is my custom widget.

4. Run your Flutter app (I'm using Pixel API 33)
5. Then click the social button you create.

Logs

I/chromium( 4782): [INFO:CONSOLE(0)] "The resource https://assets.auth.magic.link/static/app.chunk~ui~async.5c10e22bd0bed8d87a83.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.", source: https://auth.magic.link/send?params=eyJBUElfS0VZIjoicGtfbGl2ZV9FMTU0Q0I0RDRERjc2NjhFIiwiaG9zdCI6Imh0dHBzOi8vYm94Lm1hZ2ljLmxpbmsiLCJzZGsiOiJtYWdpYy1zZGstZmx1dHRlciIsImxvY2FsZSI6ImVuX1VTIiwiRVRIX05FVFdPUksiOm51bGx9 (0)
I/chromium( 4782): [INFO:CONSOLE(0)] "The resource https://assets.auth.magic.link/static/app.chunk~vendor~react~async.5fd2e021a1009b04bdf4.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.", source: https://auth.magic.link/send?params=eyJBUElfS0VZIjoicGtfbGl2ZV9FMTU0Q0I0RDRERjc2NjhFIiwiaG9zdCI6Imh0dHBzOi8vYm94Lm1hZ2ljLmxpbmsiLCJzZGsiOiJtYWdpYy1zZGstZmx1dHRlciIsImxvY2FsZSI6ImVuX1VTIiwiRVRIX05FVFdPUksiOm51bGx9 (0)
I/chromium( 4782): [INFO:CONSOLE(0)] "The resource https://assets.auth.magic.link/static/app.chunk~ui~async.abe73694ae77f405d4b6.css was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.", source: https://auth.magic.link/send?params=eyJBUElfS0VZIjoicGtfbGl2ZV9FMTU0Q0I0RDRERjc2NjhFIiwiaG9zdCI6Imh0dHBzOi8vYm94Lm1hZ2ljLmxpbmsiLCJzZGsiOiJtYWdpYy1zZGstZmx1dHRlciIsImxvY2FsZSI6ImVuX1VTIiwiRVRIX05FVFdPUksiOm51bGx9 (0)

Things I've already tried

Following the official docs by changing the XML but it still won't fix.

[jimvandijk]

Problem

I'm using Flutter 3.7.0-1.2.pre • channel beta, magic_sdk: ^0.3.0 and magic_ext_oauth: ^0.1.0 to implement social login, login with SMS and login with magic link. But I encounter some issues. When I try to use social login method by followin the official docs in Magic's website, I get an error message that looks like the following,

Steps to Reproduce

1. Add magic_sdk: ^0.3.0 and magic_ext_oauth: ^0.1.0 to your flutter dependencies in pubspec.yaml file
2. Run flutter pub get
3. Implement the .loginWithPopup() in your Flutter project. For my case, here's my minimal code:

SocialButton(
  iconPath: Assets.illustrations.thirdParty.google.path,
  onPressed: () async {
    const redirectUri = 'https://auth.magic.link/v1/oauth2/hgXj1yYu36o9ATczvVweV2eWqUpvbLX7YhsuszEpMO8=/callback';
    var googleConfig = OAuthConfiguration(
      provider: OAuthProvider.GOOGLE,
      redirectURI: redirectUri,
    );
    await magic.oauth.loginWithPopup(googleConfig);
  },
)

Where SocialButton() is my custom widget. 4. Run your Flutter app (I'm using Pixel API 33) 5. Then click the social button you create.

Logs

I/chromium( 4782): [INFO:CONSOLE(0)] "The resource https://assets.auth.magic.link/static/app.chunk~ui~async.5c10e22bd0bed8d87a83.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.", source: https://auth.magic.link/send?params=eyJBUElfS0VZIjoicGtfbGl2ZV9FMTU0Q0I0RDRERjc2NjhFIiwiaG9zdCI6Imh0dHBzOi8vYm94Lm1hZ2ljLmxpbmsiLCJzZGsiOiJtYWdpYy1zZGstZmx1dHRlciIsImxvY2FsZSI6ImVuX1VTIiwiRVRIX05FVFdPUksiOm51bGx9 (0)
I/chromium( 4782): [INFO:CONSOLE(0)] "The resource https://assets.auth.magic.link/static/app.chunk~vendor~react~async.5fd2e021a1009b04bdf4.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.", source: https://auth.magic.link/send?params=eyJBUElfS0VZIjoicGtfbGl2ZV9FMTU0Q0I0RDRERjc2NjhFIiwiaG9zdCI6Imh0dHBzOi8vYm94Lm1hZ2ljLmxpbmsiLCJzZGsiOiJtYWdpYy1zZGstZmx1dHRlciIsImxvY2FsZSI6ImVuX1VTIiwiRVRIX05FVFdPUksiOm51bGx9 (0)
I/chromium( 4782): [INFO:CONSOLE(0)] "The resource https://assets.auth.magic.link/static/app.chunk~ui~async.abe73694ae77f405d4b6.css was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.", source: https://auth.magic.link/send?params=eyJBUElfS0VZIjoicGtfbGl2ZV9FMTU0Q0I0RDRERjc2NjhFIiwiaG9zdCI6Imh0dHBzOi8vYm94Lm1hZ2ljLmxpbmsiLCJzZGsiOiJtYWdpYy1zZGstZmx1dHRlciIsImxvY2FsZSI6ImVuX1VTIiwiRVRIX05FVFdPUksiOm51bGx9 (0)

Things I've already tried

Following the official docs by changing the XML but it still won't fix.

Have you been able to solve this, @AlphaByte-RedTeam ? I am experiencing the same issue

[AlphaByte-RedTeam]

Problem

I'm using Flutter 3.7.0-1.2.pre • channel beta, magic_sdk: ^0.3.0 and magic_ext_oauth: ^0.1.0 to implement social login, login with SMS and login with magic link. But I encounter some issues. When I try to use social login method by followin the official docs in Magic's website, I get an error message that looks like the following,

Steps to Reproduce

1. Add magic_sdk: ^0.3.0 and magic_ext_oauth: ^0.1.0 to your flutter dependencies in pubspec.yaml file
2. Run flutter pub get
3. Implement the .loginWithPopup() in your Flutter project. For my case, here's my minimal code:

SocialButton(
  iconPath: Assets.illustrations.thirdParty.google.path,
  onPressed: () async {
    const redirectUri = 'https://auth.magic.link/v1/oauth2/hgXj1yYu36o9ATczvVweV2eWqUpvbLX7YhsuszEpMO8=/callback';
    var googleConfig = OAuthConfiguration(
      provider: OAuthProvider.GOOGLE,
      redirectURI: redirectUri,
    );
    await magic.oauth.loginWithPopup(googleConfig);
  },
)

Where SocialButton() is my custom widget. 4. Run your Flutter app (I'm using Pixel API 33) 5. Then click the social button you create.

Logs

I/chromium( 4782): [INFO:CONSOLE(0)] "The resource https://assets.auth.magic.link/static/app.chunk~ui~async.5c10e22bd0bed8d87a83.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.", source: https://auth.magic.link/send?params=eyJBUElfS0VZIjoicGtfbGl2ZV9FMTU0Q0I0RDRERjc2NjhFIiwiaG9zdCI6Imh0dHBzOi8vYm94Lm1hZ2ljLmxpbmsiLCJzZGsiOiJtYWdpYy1zZGstZmx1dHRlciIsImxvY2FsZSI6ImVuX1VTIiwiRVRIX05FVFdPUksiOm51bGx9 (0)
I/chromium( 4782): [INFO:CONSOLE(0)] "The resource https://assets.auth.magic.link/static/app.chunk~vendor~react~async.5fd2e021a1009b04bdf4.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.", source: https://auth.magic.link/send?params=eyJBUElfS0VZIjoicGtfbGl2ZV9FMTU0Q0I0RDRERjc2NjhFIiwiaG9zdCI6Imh0dHBzOi8vYm94Lm1hZ2ljLmxpbmsiLCJzZGsiOiJtYWdpYy1zZGstZmx1dHRlciIsImxvY2FsZSI6ImVuX1VTIiwiRVRIX05FVFdPUksiOm51bGx9 (0)
I/chromium( 4782): [INFO:CONSOLE(0)] "The resource https://assets.auth.magic.link/static/app.chunk~ui~async.abe73694ae77f405d4b6.css was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.", source: https://auth.magic.link/send?params=eyJBUElfS0VZIjoicGtfbGl2ZV9FMTU0Q0I0RDRERjc2NjhFIiwiaG9zdCI6Imh0dHBzOi8vYm94Lm1hZ2ljLmxpbmsiLCJzZGsiOiJtYWdpYy1zZGstZmx1dHRlciIsImxvY2FsZSI6ImVuX1VTIiwiRVRIX05FVFdPUksiOm51bGx9 (0)

Things I've already tried

Following the official docs by changing the XML but it still won't fix.

Have you been able to solve this, @AlphaByte-RedTeam ? I am experiencing the same issue

No I have not. I have already migrated to another platform. @nziokajimkelly

[Ethella]

Hey guys, thx for reporting this. Taking a look now

[Ethella]

@nziokajimkelly,I couldn't reproduce the issue using magic_sdk@^2.0.1 and magic_ext_oauth@0.3.2 Could you give it a try on these versions?

[jimvandijk]

Hello, @Ethella Thank you so much for taking your time to have a look at this issue. However, I am using the same exact versions (magic_sdk@^2.0.1 and magic_ext_oauth@0.3.2). What we've tried is only Google and Apple Sign In, and they both result in the same error message.

For Google, for instace, we enabled it from the Magic Dashboard, and added the Client ID and Client Secret Google. Then, we took the Redirect URI provided by Magic and added it to the app like so:

var configuration = moauth.OAuthConfiguration( provider: moauth.OAuthProvider.GOOGLE, redirectURI: EnvironmentConfig.MAGIC_REDIRECT_URL); await magic.oauth.loginWithPopup(configuration);

 where `EnvironmentConfig.MAGIC_REDIRECT_URL` is the value of the redirect URI provided in the Magic Dashboard.

 If I may, is this the correct way to do it, or are there some additional information/configurations needed to be made on the Dashboard?

[Ethella]

It sounds like the issue is from something other than the Flutter SDK. Would you be able to plug your API_Key into the flutter demo app and see if the problem persists?

Meanwhile, I'll reach out to my colleagues and see if we can find any traces from the backend. @nziokajimkelly, Could you share your API_KEY with our support team via our helpdesk or support@magic.link? and have this open issue attached to the conversation.

[jimvandijk]

Sure thing, @Ethella, no problem. Kindly, by API_KEY in this context, are you referring to the Magic publishable key?

[Ethella]

Yes.

[jimvandijk]

@Ethella I have shared my API_KEY via the helpdesk

[Ariflo]

Hi @nziokajimkelly, thanks again for reaching out via our Helpdesk. To further help us get to the bottom of this bug, can you confirm that you are seeing the same error that @AlphaByte-RedTeam shows above? Can you send us a screenshot of your error?

[jimvandijk]

Hello, @Ariflo , I am truly grateful for you getting back to me on the issue. And yes, I can confirm that I am seeing the same error @AlphaByte-RedTeam is when trying to sign in with socials. We have enabled Google and Apple Sign In, but trying to use either of the aforementioned providers leads to the error @AlphaByte-RedTeam and I see. Please find attached screenshots of the error:

[Ariflo]

@nziokajimkelly, out of curiosity, have you tried testing the social login on dashboard.magic.link? What happens when you click the "Test Connection" button below where we provide the redirectURI?

From what we can tell, the error only occurs when something isn't configured correctly with the third party OAuth, in this case Apple and Google. To help you troubleshoot, I recommend testing your API_KEY on our demo flutter app.

To go one step further, you can also try testing against one of our RN demo apps as well. If they the error doesn't crop up, then we can be more certain the issue is with the Flutter SDK.

[Ariflo]

out of curiosity, have you tried testing the social login on dashboard.magic.link? What happens when you click the "Test Connection" button below where we provide the redirectURI?

My colleagues just informed me that you have in fact seen the success message on dashboard. Thanks!

[jimvandijk]

out of curiosity, have you tried testing the social login on dashboard.magic.link? What happens when you click the "Test Connection" button below where we provide the redirectURI?

My colleagues just informed me that you have in fact seen the success message on dashboard. Thanks!

Yes, @Ariflo , I see the success message on the dashboard upon clicking the Test Connection button. Kindly, if I may, apart from editing the AndroidManifest.xml file on Android as per the Magic Flutter docs, are there any other required configurations for the Social Logins to work?

Here is how we've edited said AndroidManifest.xml file. We've included the below activity within the application tag:

`

</activity>`

And to initiate logging in with socials (Google and Apple), this is the Flutter code we have:

**Google**
`Magic magic = Magic.instance;
  var configuration = moauth.OAuthConfiguration(
      provider: moauth.OAuthProvider.GOOGLE,
      redirectURI: EnvironmentConfig.MAGIC_REDIRECT_URL);
  OAuthResponse response = await magic.oauth.loginWithPopup(configuration);`

  **Apple**
  `Magic magic = Magic.instance;
   var configuration = moauth.OAuthConfiguration(
      provider: moauth.OAuthProvider.APPLE,
      redirectURI: EnvironmentConfig.MAGIC_REDIRECT_URL);
   OAuthResponse response = await magic.oauth.loginWithPopup(configuration);`

Where EnvironmentConfig.MAGIC_REDIRECT_URL contains the full redirectURI you provide in the dashboard

[Ariflo]

are there any other required configurations for the Social Logins to work?

No.

@nziokajimkelly have you taken a look at our demo flutter app yet?

As it stands we are able to successfully login with Google and Apple on the demo. Perhaps we can compare what you've implemented against the demo to see if anything significant differs.

[jimvandijk]

Hello, @Ariflo

Thank you very much for your suggestion to look at the demo Flutter app. As it turns out, there was a tiny difference between my implementation and that in the demo. When specifying the configuration Object with which to sign in with, for the redirectURI parameter, I was wrongfully passing the redirectURI provided in the Magic dashboard. As it turns out, I needed to provide a custom app scheme, as the parameter, something along the lines of app.custom.link://. I can now login using both Google and Apple.

This was an error from my side, and I sincerely do apologize for any inconveniences caused to you and any of your colleagues. I should have read the documentation on the implementation more keenly.