Social login with Flutter App

[marco]

Hey there!

We are having some difficulties with social login inside our flutter app.

Whenever we try to login using Google (for example) we are able to get the token inside the app, but when it goes through Fusion Auth there is an error.

The logged error is:

Request to the [https://www.googleapis.com/oauth2/v3/tokeninfo] endpoint failed. Status code [400].

Error response is 
{
  "error_description" : "Invalid Value"
}

Is there a way to use iOS/Android tokens inside FusionAuth?

We think that might be the problem, but if you have any suggestion would be nice.

Thank you guys.

[dan]

Hiya,

I don't know the answer offhand, unfortunately. If I were debugging this issue, I'd make sure I could do social login with Google using a webclient, just to remove the mobile issue from the equation.

Is there a way to use iOS/Android tokens inside FusionAuth?

I'm not quite sure what you mean there. Can you explain further?

[marco]

Hey dan, thanks for taking the time.

About your suggestion, we tried to login using a web client, and it works fine!

So, the next step would be to use a webview inside our flutter app, and it should work, right?

Unfortunately, we tested many flutter plugins for webviews, including the official one, but they all have some issues with the keyboard (most are experimental), and that will block users from logging in, because they can't type their passwords.

About the token validation error I mentioned on the first question, as flutter generates native apps, we used the mobile token provided by google developer, and that does not work because fusion auth expects a web token instead. After that experience, we tried to find a solution using the web token, but we end up with the problems above.

That is why we asked if fusion auth would allow and validate mobile tokens. I hope someone in the community have already used fusion auth social login within a flutter app.

[dan]

Ah, makes sense.

I don't think you want to use a webview or an ios/android token. Per OAuth 2.0 for Native Apps, the recommended solution is to use the system browser:

For authorizing users in native apps, the best current practice is to
perform the OAuth authorization request in an external user-agent
(typically the browser) rather than an embedded user-agent (such as
one implemented with web-views).

You can see how this was implemented in React Native here: https://fusionauth.io/blog/2020/08/19/securing-react-native-with-oauth and here https://github.com/fusionauth/fusionauth-example-react-native

[marco]

Hey Dan.

I just wanted to thank you for the support.

We are now using FusionAuth login pages directly (as you suggested), and it works perfectly!

For reference, we used this flutter package: https://pub.dev/packages/flutter_appauth/example

Thank you again!

[dan]

That's awesome, glad it got worked out.

Please share here when your app is released!

[mak]

We are new to flutter development and not sure how to integrate fusion auth, I am going thru the pointers but does not seem straightforward, if there is a sample implementation that would be awesome

[dan]

Hiya,

We'll be releasing a flutter example app in the next few weeks. Keep an eye on the blog for it: https://fusionauth.io/blog/

[mak]

@dan Thank you so much,

I am trying to implement it and using the below function, but it redirects to the fusionAuth UI but when on the callback I see the below error

 result =
        await appAuth.authorizeAndExchangeCode(
          AuthorizationTokenRequest(
            FUSIONAUTH_CLIENTID,
            FUSIONAUTH_REDIRECT_URI,
//            issuer: FUSIONAUTH_ISSUER,
            discoveryUrl: FUSIONAUTH_DISCOVERY_URL,
            scopes: <String>['openid', 'profile', 'offline_access'],
            // promptValues: ['login']
          ),
        );```

I am getting thee error below
===================
PlatformException(authorize_and_exchange_code_failed, Failed to authorize:[error: invalid_client, description: Client
authentication missing aaas Basic Authorization header or credentials in the body(or some combination of them.], null, null)

[dan]

You could try turning off "Require authentication" in the application's OAuth tab and seeing if that helps.

If that fixes it, it seems like the FusionAuth dart client isn't properly providing the client secret to FusionAuth, which seems like a bug. If so, can you file an issue here: https://github.com/fusionauth/fusionauth-dart-client

[dan]

Just wanted to update. A user opened: https://github.com/FusionAuth/fusionauth-dart-client/issues/7

To clear things up, with a public client like a mobile application, you can't safely store a client secret (it'll be shared among all the native apps and can be found via decompilation).

In this scenario, you should disable Require authentication in the FusionAuth Application configuration and use PKCE to secure communication with the Token endpoint.

You can use the exchangeOAuthCodeForAccessTokenUsingPKCE client method to do so.

This is also outlined here: https://fusionauth.io/docs/v1/tech/client-libraries/dart/