google authentication with supabase dart package

[sumchans]

I am trying out the supabase authentication with Flutter. Below is the code I have on using the google authentication with supabase.

final supabaseClient = SupabaseClient('supabase_url','supabase_key');
Future signUp() async {
final response = await supabaseClient.auth.signUp({
provider: 'google'
})
}

the above code gives me two errors even before running it -

1. Getter not found: 'provider'
2. Too few positional arguments: 2 required, 1 given

Please advise!

Thanks all!

[sumchans]

Anybody from the Supabase community who can help me out on this one?

[inian]

Hi @sumchans, here are some examples on how the functions are used.

Here is how you signin with google. Does this help?

[lokesh-coder]

Facing same issue. What I got to know is, internally gotrue-dart package just returns the authorize url for third party providers.

 final session =  await client.auth.signIn(provider: Provider.google);
 print(session.url); // returns https://<PROJECT_NAME>.supabase.co/auth/v1/authorize?provider=google

Once we got the URL, we need to manually trigger the browser tab to open this url. This can be done using url_lancher or flutter_web_auth package. Right after the tab is opened and user completes the signIn/register, google redirects to callback url.

This callback url will have access_token, and other necessary OAuth props in query params. Callback URL is taken from Additional Redirect URLs in Supabase Auth settings. But this has to be custom unique schema(other than http/s) so that it can be registered in mobile device and redirect to the app. We can set something like myapp://callback.

So the final callback url will looks like

myapp://callback#access_token=abc...xyz&expires_in=3600&provider_token=mno.efgh&refresh_token=jkl&token_type=bearer

from this we can parse the data and set the user session.

 final user = await client.auth.getSessionFromUrl(Uri.parse(callbackUrl));

To register the scheme myapp://, we need to set this, if flutter_web_auth is used.
in android/app/src/main/AndroidManifest.xml

<activity android:name="com.linusu.flutter_web_auth.CallbackActivity" >
    <intent-filter android:label="flutter_web_auth"  android:autoVerify="true">
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="myapp" />
    </intent-filter>
</activity>

Sample code

There might be a better solution, but this is what my temporary solution is.

import 'package:supabase/supabase.dart';
import 'package:flutter_web_auth/flutter_web_auth.dart';

  
final client = SupabaseClient('https://<PROJECT_NAME>.supabase.co','<SUPABASE_KEY>');

void signInWithGoogle(BuildContext context) async {
  final url = Uri.https('<PROJECT_NAME>.supabase.co', '/auth/v1/authorize', {
    'provider': 'google',
    'redirect_to': "myapp://callback",
  });
  final String callbackUri = await FlutterWebAuth.authenticate(
      url: url.toString(), callbackUrlScheme: "myapp");

  final session =
      await client.auth.getSessionFromUrl(Uri.parse(callbackUrl));
  print("user email => ${session.data?.user?.email}");
}

[phamhieu]

Thanks @lokesh-coder for the detail explanation.

internally gotrue-dart package just returns the authorize url for third party providers.

To keep the current library as a dart package. We can't use any specific flutter code to support features as launching url or session storage...
I'm open for a Supabase flutter package in the future that can help tackle these issues. We have a lot of work to do so we can't give firm deadlines about this.

[sumchans]

Thanks @lokesh-coder , this was nice and super detailed.

[netgfx]

Is there a typo? Should callbackUri be callbackUrl as it is used later on the Uri.parse(callbackUrl) ?

[clube-de-matematica]

How can I retrieve the callback URL in a flutter web app?