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:

Create a new Flutter project

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:

lib/main.dart

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.

pubspec.yaml

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.

lib/main.dart

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.

lib/main.dart

Call the function from our button

lib/main.dart

That’s It for Email Login

Now you should be able to sign up and log in with email.

Log in with Email using Cotter’s Flutter SDK

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:

lib/phoneSignIn.dart

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.

lib/main.dart

Initialize Cotter

Just like before, import Cotter in your lib/phoneSignIn.dart, then initialize it inside HomePageState.

lib/phoneSignIn.dart

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.

lib/phoneSignIn.dart

Call the function from our button

lib/phoneSignIn.dart

That’s It

Now you should be able to login using your phone number via SMS or WhatsApp.

Phone Login via SMS or WhatsApp using Cotter’s Flutter SDK

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:

1. Implement Sign in with Device so you don’t have to send an email or SMS on every login.
2. Getting the Logged-in User
3. 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.