Flutter Email & Phone Auth: 3 Simple Steps To Log In Your Users via Email, SMS, and WhatsApp using Cotter
When building an app, it’s often a requirement to make sure your users are real and you want to know if they own the email or phone number that they signed up with so you can communicate via those channels.
In this tutorial, we’ll build a flutter app that allows users to sign up and sign in with their email or phone number.
In this post:
- Create a Flutter App
- Sign in with Email
- Sign in with Phone Number via SMS or WhatsApp
- See the result: Sign in with Phone Number
Create a Flutter App
If this is your first time making a Flutter app, check out their installation guide. To create a new flutter app, run:
Sign in with Email
Make a Welcome Page
We’ll edit lib/main.dart
to make our welcome page. Replace the contents with the following code:
Sign Up New Users or Login Existing Users
Notice that we only have a “Sign in” button. We’ve combined the sign-up and login functionality. After verifying the user’s email:
- If it’s a new user, the SDK will automatically create a new user in Cotter, and return the new user to you.
- If it’s a user that already exists in Cotter, the SDK will return the existing user information.
Step 1: Add Cotter to your project
Add Cotter to your pubspec.yaml
, then run flutter pub get
.
Check the latest releases in pub.dev.
You may need to restart your flutter for it to run pod install (stop
flutter run
and re-run it).
Initialize Cotter
Import Cotter in your lib/main.dart
, then initialize it inside HomePageState
.
You can create a free account at Cotter to get your API_KEY_ID
.
Step 2: Setup Deep-Linking
To sign in using email verification, we will open a secure in-app browser where the user can enter the OTP sent to their email. We’ll need to set a redirect URL that points to your app to tell the in-app browser what to do after it’s finished authenticating. Let’s set the redirect URL as myexample://auth_callback
.
Setup in iOS
Add the following to your ios/Runner/Info.plist
.
ios/Runner/Info.plist
Setup in Android
Add the following to your android/app/src/main/AndroidManifest.xml
.
android/app/src/main/AndroidManifest.xml
Now stop
flutter run
and re-run it.
Step 3: Make a Sign-Up/Login Function
To sign in using email verification, call cotter.signInWithEmailOTP
.
Call the function from our button
That’s It for Email Login
Now you should be able to sign up and log in with email.
Sign In with Phone Number
Let’s add another page to try signing up with a phone number. Make a new file called phoneSignIn.dart
inside the lib
folder:
Then, copy the code below:
Go to Phone Sign-In Page from the Home Page
Let’s make a button in our home page to go to this new PhoneSignInPage
. Add a button in lib/main.dart
.
Initialize Cotter
Just like before, import Cotter in your lib/phoneSignIn.dart
, then initialize it inside HomePageState
.
Open your dashboard to get your API_KEY_ID
. To send SMS or WhatsApp messages, you need to add a balance to your account.
Make a Sign Up/Login Function
To sign in using phone verification, call cotter.signInWithPhoneOTP
. This will open a pre-built phone number input inside the in-app browser. You can also use your own input form if you want.
Call the function from our button
That’s It
Now you should be able to login using your phone number via SMS or WhatsApp.
What’s Next?
The signUp
and login
functions that you implemented automatically create access tokens for you and store it securely within the device. It also saves the currently logged-in user and automatically refreshes your access token when it's expired. Learn how to:
- Implement Sign in with Device so you don’t have to send an email or SMS on every login.
- Getting the Logged-in User
- Getting Access Token, ID Token, and Refresh Token
Questions & Feedback
If you have any questions or feedback, feel free to join Cotter’s Slack Channel and chat us there.
Ready to use Cotter?
If you enjoyed this tutorial and want to integrate Cotter into your website or app, you can create a free account and check out our documentation.
Originally published at https://blog.cotter.app on June 23, 2020.