Login with Google Using Supabase in FlutterFlow App

[@lucenajjj]

I have to congratulate you not only for the video but for making the code available, many KZbinrs make videos and don't make the code available. You're 1000 note

[@flutterflowvip]

Glad I could help

[@mohamedsaid3449]

thanks for all the other videos by the way they are great and very very helpful.

[@flutterflowvip]

Glad you like them!

[@mazenalsakkaf]

Fantastic video! I'm particularly interested in implementing a reminder feature that can notify the user even when the app is not running. I'm using FlutterFlow and Supabase, and I'm not sure how to achieve this functionality. Could you please share some guidance on how to approach this? Thanks again for the great content! Cheers

[@flutterflowvip]

Integrate Onesignal with your app . I have already created a video on onesignal integration with flutterflow.

[@mazenalsakkaf]

@@flutterflowvip Thanks a lot!

[@vnhg]

This is really good. Thank you

[@ajaykumarz22]

Hey, the status bar color changed but the text and icons on status bar is not visible. maybe those text and icon colors are also white? how to handle this?

[@flutterflowvip]

To change color of status bar text and icon you have to extend the code to use color for these.

[@wesseldieben7490]

I have a question this only seems to work on web. XCode for IOS doesn't support dart library 'dart:html'. So how do we solve this?

[@flutterflowvip]

You can try another package instead of html that supports ios

[@jwolpert]

This has changed, right? Flutterflow authentication options now include Supabase/Google oauth direct setup without creating custom code, no?

[@flutterflowvip]

Yes it's now available in flutterflow

[@scalenieduszy]

Great job!

[@mohamedsaid3449]

i did exaclty as shown in teh video but the it keeps saying "Declaration not found" am i missing on something??

[@flutterflowvip]

Try the action name by copy pasting function name

[@alexjunio_prof]

Thank you! Could you teach us how to insert a row in a table "user" as example after the users sign up with Google?

[@flutterflowvip]

You can insert exactly the same way you do if implemented email auth.

[@Kamal_sabki]

I setup google auth with supabase and I realized that create account and login with google are the same, they jump directly to the logged in page overriding any logic; I inserted an action to insert a row right after create account to add a row in my custom user table and it’s not working , it only add a row in the auth table. I have a 2 flows in signup (email and google) based on the choice I have to navigate the user to a specific page, it’s working with email and not working with google, it neglect my logic and jump to home page. Any suggestions ?

[@flutterflowvip]

the login flow will be the same because the auth response is handled by Flutter flow. and about - you can create a function and trigger in supabase - so when a new auth user gets created it will create the same user in public.user table with the same auth uid @@Kamal_sabki

[@mdsalahuddin2841]

Compile button is not available on the custom action code page on ff. any advice?

[@flutterflowvip]

It's happens sometimes just refresh the page.

[@athuls2816]

great video man, can you do a video for payment with supabase it would be a banger for sure and the community is eager tp know that! hope...

[@flutterflowvip]

Sure

[@athuls2816]

@@flutterflowvip thanks man ! Looking forward to it

[@atheer3343]

Is it possible to integrate Stripe connect (for multivendor type of transactions ) in flutterflow with supabase as a backend? If so Can you please make a video on this. Thank you for the content and info.

[@flutterflowvip]

Yes it's possible using edgefunction. and sure I will try to create video on this soon

[@atheer3343]

I would greatly appreciate it and the rest of the FF community as well. It’s barely touched upon by anyone else and not a lot of resources for it. Thank you for your consideration and your time and wish you all the best. Love the channel and the content you provide 💙.

[@laugedyret]

Thanks!

[@abdifatahsaid6624]

thanks for the video, i have a question how to get the sccess_token, refresh_token and user_id after authenticated. thank you

[@flutterflowvip]

If you use the method mentioned in the video . Then u can use Flutterflows Authenticated user . variable.you will get all the details

[@abdifatahsaid6624]

Btw iam using fcm notifications. But it is only working in the background mot the foreground. How can i make it work in the foreground

[@bluerm135]

Great video! It is really helpful. Could we build flutterflow app using apple login in supabase? And this topic is in your future video plan??

[@flutterflowvip]

Yes, definitely we can build apple login with supabase and yes it is in my video plan.

[@sbessot]

hello, it seems to stay in test mode for Google, how do we change it to production ?

[@flutterflowvip]

If you are creating web app then you have add your web url in supabase redirect uri If it's an Android or iOS then add your deeplink in supabase redirect uri.

[@sbessot]

we have an error with the code "import 'dart:html' as html" when we export apk file.@@flutterflowvip

[@vito77]

@@flutterflowvip same error "import 'dart:html' as html" here

[@JimilPatel-f6h]

Thank you for this video..can you please make video how to see realtime changes in flutterflow from supabase?

[@flutterflowvip]

sure i will make a video on this soon

[@YohannanKPhilip]

Hey thanks for the video, Your video works great for web app But can you help how to make this of mobile app?

[@flutterflowvip]

this method is also for mobile app just follow the deeplink steps

[@sergiuKyzminskiy]

Hello! The video is good, but is I don't need to create an account in the app, how should I perform auth. to the app. For example, I want to create the app for private company and the access to the app will only for the people, who are in the DB.

[@real_manish]

you can disable account creation . and add users manually.

[@real_manish]

or if everyone using organization email id . Then you can allow login or registration with specific domain .

[@flutterflowvip]

you can follow any of these.

[@diegotewhite]

Thanks for sharing your knowledge!!! I ran into a problem and I can't solve it. I get an error when compiling the action. This is the error : Unknown error compiling custom code. A common cause is a custom widget or action whose name in the code does not match the name provided in the editor. To make sure it's not the name, I used the boilerplate. I changed the name signInWithGoogle 1000 times, I put shorter names... but nothing. I thought it was a Beta version problem, but no. I tried compiling it with the beta in another project and it worked. The only difference is that the other project does not import this: import '/backend/schema/structs/index.dart'; Forgive me if I'm showing you this and it has nothing to do with it, I'm not very clear about this.

[@flutterflowvip]

Thanks for pointing it . This import is unnecessary. I will remove it from the code.

[@diegotewhite]

I can´t remove it...

[@flutterflowvip]

Then you must be using data type .

[@flutterflowvip]

Try to copy and past the exact name in function to the action name.

[@diegotewhite]

Miraculously, that error no longer occurs! The problem is that when I log in with Google, it goes to the web app and not to the app that I am testing or running.

[@abdifatahsaid6624]

can you create the apple signin with supabase please. thank you

[@flutterflowvip]

Sure soon

[@abdifatahsaid6624]

And also can you make a video for sms otp auth

[@flutterflowvip]

Sure

[@Kamal_sabki]

Thanks for the video, I have an issue with google signup as am not able to redirect the user to a certain page to continue the onbording, i have a page with pagview widget (7 pages) and based on the choice of auth (email, google or apple) I redirect the user to the right pageview index to continue the onbording signup, but the behavior is different as when clicing on signup with google the user is directed to the site URL of supabase, even redirect url with deep linking not working ? any suggestions please to redirect the user only in the sigup process ? thanks

[@flutterflowvip]

i you want to redirect to specific page then you have to use custom authentication in flutterflow

[@16td]

hello, is using google sign-in free (with supabase)?

[@flutterflowvip]

yes its free

[@yosbel12]

can you make one with discord login with supabase and get groups channel notifications

[@flutterflowvip]

Sure I will try to make it soon.

[@yosbel12]

@@flutterflowvip that’s would be great ! !

[@pramodgeorgehq]

Hi Manish, how do I connect with you?

[@flutterflowvip]

Hi pramod you can mail me here - [e-mail]

[@xzatech]

Would you mind doing a Supabase reset password video? much appreciated

[@flutterflowvip]

Coming soon

[@PrinceSingh-z9v4i]

Sir, please make a dedicated video on reflect, i request you

[@flutterflowvip]

I won't be able to make seperate video right now. But I can guide you if you face any issue while creating your note app. Let me know where you are stuck .

[@PrinceSingh-z9v4i]

@@flutterflowvip sir, how to add bold, heading section on note taking app

[@PrinceSingh-z9v4i]

@@flutterflowvip sir, can you just show the timeline, for example which widget you are using and all of stuff!! Please its took only few minutes and help alot of subs.

[@flutterflowvip]

For Note Taking app you can try html Enhance Editor Package. It's have all the feature required for a note taking app. That exactly I have used in reflect

[@PrinceSingh-z9v4i]

@@flutterflowvip that why i said to make a dedicated video, i dont have knowledge in coding sir, please make a video on, i s e n d. y o u 1000 r s , sir please na i request you many times, please just open the camera and shoot the video, i dont know coding and advance knowledge in flutterflow, please 🙏

[@onedayapp3534]

Do you know how to do it also with AppStore loging?

[@flutterflowvip]

What do you mean. AppStore loging

[@onedayapp3534]

@@flutterflowvip iOS logging sorry, with the Apple account

[@jeaneshpatel4370]

I've implemented this, however there is an issue with the callback url that is returned by supabase. In flutterflow it seems the fragement (#) is being removed on load, so we can't access access_token, refresh_token, provider_token, expiry, etc. Any ideas how to get this data? Also these parameters are not in camel case which I think is another issue.

[@flutterflowvip]

add the deeplink off your to Supabase . For callback url. and test in read device.

[@jeaneshpatel4370]

@@flutterflowvip Hi, I managed to get this working with a custom action, by using the uni_links dart package to read the deeplink. Thanks for your help!

[@flutterflowvip]

Good to know .

[@galendoproject6398]

sir, how do you add level users in ff supabase?

[@flutterflowvip]

What do you mean level user. Do you mean add user as different role instead of user ? Like . admin or something?

[@galendoproject6398]

yes users like admin, user1, user2. how to use it in flutterflow supabase?

[@flutterflowvip]

First you need to create roles using SQL and Create RLS Policy according to those roles for Inserting , updating , deleitng @@galendoproject6398

[@galendoproject6398]

Can you provide or share the video sir 🙏🙏

[@flutterflowvip]

I haven't created any role based video on supabase yet. but I am planning to create video on this topic soon.

[@akashadepudi8526]

bro can u say how to login with mobile number otp verification using supabase can anyone help me pleaseee

[@flutterflowvip]

yes bro I will make a video on this soon.

[@amazingvideos4824]

Brother please provide username and password to download the code

[@flutterflowvip]

It will be available tomorrow

[@romilmachado7]

Hey, I am facing an issue in my flutter flow project. Is there any way I can connect with you. Instagram or chat box?

[@rohailkhalid52]

when i open the code you gave in description it shows this? tell me how can i fix this and also plz tell me where can i find my Site URl for Url configration { "kind": "Status", "apiVersion": "v1", "metadata": {}, "status": "Failure", "message": "forbidden: User \"system:anonymous\" cannot get path \"/flutterflow-google-login-with-supabase/\"", "reason": "Forbidden", "details": {}, "code": 403 }

[@flutterflowvip]

thats for reporting let me check

[@rohailkhalid52]

I will be very grateful if u would help me in this and also can you plz tell me how to use phone authentic ation

[@flutterflowvip]

Sure

[@YohannanKPhilip]

Hey Thanks for the video, Your video works great for web app But can you help how to make this of mobile app?

[@flutterflowvip]

the method i used in this is also going to work on mobile device .i have tested.