Sign in with Email/Phone Number
Our Flutter SDK offers the easiest way to integrate Cotter 's email/phone verification. You can simply call a function and it does most of the heavy lifting and authentication for you.
Concepts: Learn about how Sign in with Email/Phone Number works.
Overview
Verifying email and phone number in your mobile app using our Flutter SDK consists of the following steps:
Call Cotter's Login function
Setup deep linking
Receive user's email or phone number, and whether or not it's verified
What you're building

Steps
Step 1: Import Cotter as a dependency
Add Cotter to your pubspec.yaml
, then run flutter pub get
.
dependencies:
cotter:
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).
For Android: Update minSdkVersion
to 18
following the installation instructions.
Step 2: Setup Deep Linking
The verification will follow OAuth's PKCE flow which will open an in-app browser where your user can enter the OTP sent to their email/phone.
Pick a unique URL scheme for redirecting the user back to your app after the verification in the in-app browser is successful. For this example, we'll use myexample://auth_callback
.
Make sure your URL scheme (the front part before ://
) doesn't have an underscore or other special characters. To test it out, enter your Redirect URL here: https://jsfiddle.net/omd02jn5/
Setup in iOS
Add the following to your ios/Runner/Info.plist
.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<!-- ADD THE LINES FROM HERE -->
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLName</key>
<string>myexample</string> <!-- 👈 Change this to your own URL Scheme -->
<key>CFBundleURLSchemes</key>
<array>
<string>myexample</string> <!-- 👈 Change this to your own URL Scheme -->
</array>
</dict>
</array>
<!-- TO HERE -->
<key>CFBundleDevelopmentRegion</key>
<string>en</string>
Setup in Android
Add the following to your android/app/src/main/AndroidManifest.xml
.
<manifest ...>
<application ...>
...
<!-- Add the lines from here -->
<activity android:name="com.linusu.flutter_web_auth.CallbackActivity" >
<intent-filter android:label="flutter_web_auth">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<!-- 👇 This is for myexample://auth_callback -->
<data android:scheme="myexample" android:host="auth_callback"/>
</intent-filter>
</activity>
<!-- Until here -->
</application>
</manifest>
You may need to stop
flutter-run
and re-run it to see the changes.
Step 3: Signing Up
Make sure you have set up the deep-linking above.
Use the sign up method to:
Verify the user's email
Then create a new user in Cotter if successful
import 'package:cotter/cotter.dart'; // Import Cotter
Cotter cotter = new Cotter(apiKeyID: API_KEY_ID);
try {
var user = await cotter.signUpWithEmailOTP(
redirectURL: "myexample://auth_callback",
email: inputController.text, // Optional, if you leave this blank, user can enter email in the in-app browser
);
print(user);
} catch (e) {
print(e);
}
Step 4: Logging-In
To authenticate an existing user by verifying their email:
This method will create a new user if one doesn't exist.
Cotter cotter = new Cotter(apiKeyID: API_KEY_ID);
try {
var user = await cotter.signInWithEmailOTP(
redirectURL: "myexample://auth_callback",
email: inputController.text, // Optional, if you leave this blank, user can enter email in the in-app browser
);
} catch(e) {
print(e);
}
Step 5: Verifying a logged-in user
To verify the email of a user that is currently logged-in:
Cotter cotter = new Cotter(apiKeyID: API_KEY_ID);
try {
var user = await cotter.getUser();
user = await user.verifyEmailWithOTP(redirectURL: "myexample://auth_callback");
} catch (e) {
print(e);
}
Validating Cotter's Access Token
Checkout how to verify the OAuth Tokens from Cotter here:
Verifying JWT Tokens🎉 You're done!
Getting the Logged-in User
Cotter's SDK automatically saves the logged-in user in your device's secure storage. Check out how to get the user information:
Getting the Logged-in UserGetting OAuth Tokens
Cotter also automatically generates an access_token
, id_token
, and refresh_token
that is securely stored in the device's secure storage. Check how to get these tokens:
Securing your Project
Since you'll be using your API Key from a front-end website or mobile app, your API_KEY_ID
is exposed to anyone inspecting your code. Here are some ways to prevent abuse:
Last updated