PART 1/3
Hey there fellas! I'm back with another article and today we are talking about FirebaseAuth with Flutter and Express. I have encountered that a lot of articles online talk about using FirebaseAuth with flutter but not many of them talk about using your own server to manage the requests from your app while using FirebaseAuth. Today we will change that.
Before we being I would like to mention that I'm assuming that you know Flutter and JavaScript.
In today's article we will be using the TwitterAuth API with flutter and Express to demonstrate how you can use any platform for authentication with your Flutter app while having you own custom server (in Nodejs, Django, Express, Java etc).
Let's Get Started!
In this first article we will setup a Flutter project and connect it with our Twitter API.
START A FLUTTER PROJECT
flutter create letsauth
This command will create out flutter project that we will use to demonstrate for authentication.
START A FIREBASE PROJECT
Head over to firebase console and start a new project as shown below.
Fill in the details they are asking (you can disable Google Analytics) and you will have your project ready.
If all went well you will see a screen similar to the one shown above. Now it's time to connect our project with this flutter project.
Depending upon the platform you are currently on (I'm developing for Android) click on the icon shown and complete the steps they have described carefully. Once you are done you should have your flutter project connected to the firebase project.
It's time to get out twitter api access tokens and connect it to FlutterAuth so that we can use it to sign-in in our app.
CREATE A TWITTER API APP
This step requires you to have a twitter developer account. Head over to twitter developer page and create an account if you haven't already. While registering your app they may ask for a fallback url if you are using TwitterAuth. Head over to flutter_twitter and enter the fallback urls mentioned there (copy past doesn't seem to work. Type it out)
Once your app is registered you'll get the access key and token. Carefully save them as we will need it in future to connect firebase with twitter api.
CONNECT FIREBASE WITH TWITTER
Alright, for the next step we need to tell firebase about our twitter api and that we will be using it for authentication. Head over to the firebase console and open your project.
On the left panel select Authentication and click on Get Started. You should see the entire list of all the apis currently supported like shown below.
Currently all of them are disabled but we will enable the twitter api so that firebase can communicate with twitter.
Click on the edit symbol next to twitter and enter the api key and access token provided by twitter that I asked you to save carefully.
Upon completion you'll get a url similar to
https://demodev-dfb1f.firebaseapp.com/__/auth/handler
copy it, we will be telling our twitter api about this url now, so that it knows firebase will try to communicate with it.
Open the twitter developer console again and head over to your project that you created.
Under the twitter auth fallback urls add the url that firebase has provided and save it.
Now you are all set to make twitter auth requests from your flutter app through firebase.
Please note that you can follow the same steps to connect with potentially any auth api that firebase supports.
In this next article i will show you how you can make auth requests (to twitter or any api) from your flutter app.
Follow me so that you don't miss the next 2 articles regarding FirebaseAuth.
Thanks for reading,
Jha
Top comments (0)