FlutterFlow, Firebase auth & Xano

Robert Freericks

Hi fellow Xano users! I hope anyone can help me with the following problem.[jwt-token-auth-color.png]I use FlutterFlow for my front-end and Xano for my backend (obviously). Now I would like to use Firebase for my authentication because this makes it way easier to build within FlutterFlow. There is an option to use Firebase authentication with JWT (JSON Web Token) and that is what I am trying to achieve. The problem is that my knowledge seems to be insufficient and the documentation from FlutterFlow is not a step by step guide that I seem to need. The link below is the one to the FlutterFlow docs.

JWT Token - FlutterFlow Docs

What I want to achieve is that users log in to my (FlutterFlow) app that is connected to Firebase for authentication and through a JWT I can retrieve the correct information for the user from Xano. I hope it is clear enough and that someone can help me. It would be very highly appreciated! 

Kind regards,
Robert

Luis Romero

Hey... check the schema that you provide, I was reading the JWT Token documentation in Flutterflow... a problem with that, is the JWT option is for login in your own server and use Firebase database, notifications, etc. In this case is the opposite of what you need.

Robert Freericks

Hi Luis, thanks for taking the time to comment on my post! I do not completely understand it I am afraid, but I grasp the overall concept. Do you think it would be doable with Xano even though Xano does not support JWT? 

I am also willing to not use Firebase at all, but Xano does not seem to support refresh tokens and I don't know how I can make sure that a user stays logged in without having a refresh token. I don't want to make a non expiring token for security reasons that you probably know better  

If you have time, I would highly appreciate it if you could send me in the right direction.

Kind regards,
Robert

Luis Romero

Robert... give me some time I'll do some tests trying to figure out how to do a good integration... in the Youtube channel of Xano... there is a video for third party auth services

Robert Freericks

Much appreciated !

Johannes S

  has there been an update to this?

I am currently considering a similar setup: not as drawn on the schema Robert shared, but I'd like to have user DB & auth, push notifications etc in Firebase, and handle everything else within Xano (I understand Robert's drawing as the other way around).

Thus I somehow need to validate the Firebase JWT token here in Xano. So I am trying to figure out how to decode the JWT token (same procedure as jwt.io does) and then validate the user id via an external API call in Firebase (or so).

However, I am stuck at trying to decode the JWT token within Xano function stack - because I would need a key (amongst others), which is something I don't need at jwt.io - so I am a bit confused right now

Robert Freericks

 Hi Johannes, I am currently still figuring out how to achieve exactly what you are describing. So far I have no update, but I will notify you once I do! Currently just using Xano for auth without any connection to Firebase unfortunately.

liam

 there is a way for refresh token.

if you use "local state" method in flutter flow then everytime users enter home screen or whatever screen you choose, create a flow to call the auth API in the background and update the local state.

More info below

liam

 there is a way to do this but you're going to need a developer for this.

basically this is the solution
1. hire a developer to create a service that transforms XANO auth token into firebase compatible auth token.
2. ask that developer to create api for that service
3. call that API and store the Auth token in xano database ( DO NOT USE xano's built in auth token )
4. then create an API for flutterflow to get that AUTH token.

So in a nutshell --> you are using xano for everything EXCEPT auth token creation

😀

Nicola Toledo

 what video? thanks

Luis Romero

  this oneis basic, but can give you and idea... for example you can use a public key + auth token to protect every request... I hope this can help

JJ

Hi,

Did anyone find an optimal solution for this? I didn't try this yet.

To not use Firebase at all, I am thinking of using the auth token from XANO and put in the local state.

Setting the expiry date to 3 months in the XANO config, and then add a tracker date with a task running, to know when user logged in. After 3 months, reset the local state in order for the user to login again and request a new auth token to xano.

Do you think this is doable and from security perspective would be a good option?

Was thinking about maybe also integrating with something like this: https://curity.io/authentication-service/

or https://www.onelogin.com/

Thank you very much.

liam

@JJ using your solution, you won't be able to use push notification and any other firebase related feature because to do that you need firebase token.

here's the summary

if you don't need firebase related products at all --> use 100% XANO

if you going to need any firebase related products -> you will have to find a way to make firebase token and xano token work together.

flutterflow team did a poll and most users are voting to build supabase native integration with flutterflow. What about xano native integration ? my guess is it will not come in the next 1 to 2 years.

but if you want to find a native mobile app with xano auth integration, you can check out draftbit

Ray Deck

We had a member on State Change Pro go through this process in office hours. Auth on Flutterflow (partially because that gives you the ability to do push notifications) and then redeem that token for an auth token on Xano. We recorded the video for the community.

JJ

Hi,

Thank you very much for both inputs.

@liam , I forgot I would indeed need Push notifications, so need to put Firebase back into the equation. I dealt with Draftbit in the past, but I prefer Flutterflow features and the team. But will still take a look into how they stand today. Thanks for the tip.

Doesn't need to be native as long as it works and it is secure, I did a similar approach with Bildr, using both signups, but where actually the last entry point is using the magic link to finally login and have access to pages (So Bildr token is the last layer that gives access to frontend and Xano token to the databases), I will check with Firebase then, maybe some approach can be done and then I can use the push notifications.

Thank you very much @Ray Deck that seems indeed quite similar with what I do with Bildr, I will take a look into this.

liam

@Ray Deck does the solution involve coding ? if no coding i'd like to subscribe and see how it's done

Ray Deck

@liam we did this entirely in the no-code stack

liam

@Ray Deck great, will subscribe soon

Guillem

May it be that with the JWT sign in option we can do that? I am not sure but reading the flutterflow documentation it seems that we could use the firebase authentication along with a users database we have elsewhere. What do you think?

https://docs.flutterflow.io/data-and-backend/firebase/authentication/jwt-token

poeticHolistic

import 'dart:convert';import 'package:http/http.dart' as http;Future<String> login(String email, String password) async { final response = await http.post( Uri.parse('https://api.xano.com/api/v1/login'), headers: <String, String>{ 'Content-Type': 'application/json; charset=UTF-8', }, body: jsonEncode(<String, String>{ 'email': email, 'password': password, }), ); if (response.statusCode == 200) { final jsonResponse = jsonDecode(response.body); return jsonResponse['token']; } else { throw Exception('Failed to login'); }}