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:
1.Call Cotter's Login function
2.Setup deep linking
3.Receive user's email or phone number, and whether or not it's verified
What you're building
Sign in with Phone Number via SMS or WhatsApp using Cotter's Flutter SDK
Steps
1.​Import Cotter as a dependency​
2. Setup Deep Linking​
3.​Signing up​
4.​Logging in​
5.​Verifying a logged-in user​
Step 1: Import Cotter as a dependency
Add Cotter to your pubspec.yaml , then run flutter pub get.
pubspec.yaml
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.
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.
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.
Using Email
Using Phone Number
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);
}
Use the sign up method to:
Verify the user's phone number
Then create a new user in Cotter if successful
Option 1: You want to use Cotter's input form inside the in-app browser. This helps with validating the input.
import 'package:cotter/cotter.dart'; // Import Cotter
​
Cotter cotter = new Cotter(apiKeyID: API_KEY_ID);
try {
  var user = await cotter.signUpWithPhoneOTP(
    redirectURL: "myexample://auth_callback",
    channels: [PhoneChannel.SMS, PhoneChannel.WHATSAPP], // optional, default is SMS
  );
} catch (e) {
  print(e);
}
Option 2: You want to use your own input form and buttons. You can present 2 buttons to allow sending the OTP via WhatsApp or SMS.
Using SMS:
Cotter cotter = new Cotter(apiKeyID: API_KEY_ID);
try {
  var user = await cotter.signUpWithPhoneOTPViaSMS(
              redirectURL: "myexample://auth_callback",
              phone: inputController.text,
            );
} catch (e) {
  print(e);
}
Using WhatsApp:
Cotter cotter = new Cotter(apiKeyID: API_KEY_ID);
try {
  var user = await cotter.signUpWithPhoneOTPViaWhatsApp(
              redirectURL: "myexample://auth_callback",
              phone: inputController.text,
            );
} catch (e) {
  print(e);
}
Step 4: Logging-In
Using Email
Using Phone Number
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);
}
To authenticate by verifying user's phone number:
Option 1: You want to use Cotter's input form inside the in-app browser. This helps with validating the input.
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.signInWithPhoneOTP(
    redirectURL: "myexample://auth_callback",
    channels: [PhoneChannel.SMS, PhoneChannel.WHATSAPP], // optional, default is SMS
  );
} catch (e) {
  print(e);
}
Option 2: You want to use your own input form and buttons. You can present 2 buttons to allow sending the OTP via WhatsApp or SMS.
Using SMS:
try {
  var user = await cotter.signInWithPhoneOTPViaSMS(
              redirectURL: "myexample://auth_callback",
              phone: inputController.text,
            );
} catch (e) {
  print(e);
}
Using WhatsApp:
try {
  var user = await cotter.signInWithPhoneOTPViaWhatsApp(
              redirectURL: "myexample://auth_callback",
              phone: inputController.text,
            );
} catch (e) {
  print(e);
}
To send code/link via SMS or WhatsApp, you'll need to add some balance to you project in the Dashboard.
Step 5: Verifying a logged-in user
Using Email
Using Phone Number
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);
}
To verify the phone number of a user that is currently logged-in:
Using SMS:
Cotter cotter = new Cotter(apiKeyID: API_KEY_ID);
try {
  var user = await cotter.getUser();
  user = await user.verifyPhoneWithOTPViaSMS(redirectURL: "myexample://auth_callback");
} catch (e) {
  print(e);
}
Using WhatsApp:
Cotter cotter = new Cotter(apiKeyID: API_KEY_ID);
try {
  var user = await cotter.getUser();
  user = await user.verifyPhoneWithOTPViaWhatsApp(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 User
Getting 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:
Getting OAuth 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:
​Only allow your website/app to use your API Key​
​Rate Limit the number of authentication requests​
​Enable reCAPTCHA to prevent automated abuse​

Authenticate from a Non-Trusted Device

Getting the Logged-in User

Last modified 2yr ago