Sign In with Email/Phone Number
Concepts: Learn about how Sign in with Email/Phone Number works.
Verifying email and phone number in your mobile app using our Android SDK consists of the following steps:
Import Cotter
Call Cotter's Login function
Receive user's email or phone number, and whether or not it's verified
Register URL Scheme: Cotter's authentication will redirect back to your application using this URL scheme.
Call Cotter's Login function: This function will handle the WebView, verifying phone number or email, and request the identity from Cotter's server.
Receive the Token: Include the returned token and email/phone number in your server
Add JitPack repository your project level build.gradle at the end of repositories.
build.gradleallprojects {repositories {...maven { url 'https://jitpack.io' }}}
Add the Cotter's SDK as a dependency in your app level build.gradle .
android {...compileOptions {sourceCompatibility JavaVersion.VERSION_1_8targetCompatibility JavaVersion.VERSION_1_8}}dependencies {...implementation 'com.github.cotterapp:android-sdk:0.3.0'}
Check the latest version here https://github.com/cotterapp/android-sdk/releases.
Then sync your gradle files.
Initialize Cotter with your API_KEY_ID . Call the function below in your MainActivity
Cotter.init(this.getApplicationContext(),"https://www.cotter.app/api/v0",<API_KEY_ID>);
For example:
MainActivity.javapublic class MainActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {...Cotter.init(this.getApplicationContext(),"https://www.cotter.app/api/v0",<API_KEY_ID>);}...
You also need to decide a callback URL scheme that you want to use. If your app's package name is com.example.myapplication then you should use something like this for your URL Scheme callback.
com.example.myapplication://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/
This URL scheme will be called when Cotter's verification is done and want to go back to your app. Read more about Android deep-linking.
You need to register this URL Scheme to receive the callback. Add the following in your AndroidManifest.xml . Check the example in the example's Github repo.
AndroidManifest.xml<!-- ADD THE LINES FROM HERE --><activity android:name="com.cotter.app.RedirectUriReceiverActivity" android:exported="true"><intent-filter><action android:name="android.intent.action.VIEW"/><category android:name="android.intent.category.DEFAULT"/><category android:name="android.intent.category.BROWSABLE"/><!-- This example is for: com.example.myapplication://auth_callback --><!-- Change it to your own url --><data android:scheme="com.example.myapplication"android:host="auth_callback"/></intent-filter></activity><!-- TO HERE -->
To open up Cotter's Login screen, you can either have your user input their email or phone number inside Cotter's screen, or you can provide a text input where your users can enter their email / phone, and you can pass that to Cotter's screen.
a) To login and enter the email or phone number in Cotter's window:
// Provide Context and the URL SchemeCotter.newIdentity(this, "com.example.myapplication://auth_callback").login("EMAIL", // EMAIL or PHONEthis, // ContextDashboard.class); // Callback Class
b) To login with the email or phone number that your user entered in your app:
// Provide Context and the URL SchemeCotter.newIdentity(this, "com.example.myapplication://auth_callback").loginWithInput( // Context"EMAIL", // EMAIL or PHONEinput.getText().toString(), // User's emailthis, // ContextCallbackActivity.class); // Callback Class
To send code/link via SMS or WhatsApp, you'll need to add some balance to you project in the Dashboard.
You need to provide a class to redirect to when Cotter's email/phone number verification is complete.
Try it now! You can check if it works so far by invoking the login function above on a button click. It should load Cotter's Authentication page on a WebView.
In your CallbackActivity class, receive the token from the intent inside onCreate using this function.
String resp = IdentityManager.handleResponse(getIntent());if (resp != null) {Log.i("Login Response: ", resp);}String error = IdentityManager.handleError(getIntent());if (error != null) {Log.i("Login Error: ", error);}
For example, if your CallbackActivity class is called Dashboard:
public class Dashboard extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_dashboard);// Handle response hereString resp = IdentityManager.handleResponse(getIntent());if (resp != null) {Log.i("Login Response: ", resp);}// Handle error hereString error = IdentityManager.handleError(getIntent());if (error != null) {Log.i("Login Error: ", error);}}}
The resp will consist of the following JSON Object as a string.
{"identifier": {"ID": "f4286df9-a923-429c-bc33-5089ffed5f68","created_at": "2020-07-21T22:53:21.211367Z","updated_at": "2020-07-21T22:53:21.211367Z","deleted_at": "0001-01-01T00:00:00Z","identifier": "putri@cotter.app", // User's email"identifier_type": "EMAIL","device_type": "BROWSER","device_name": "Mozilla/5.0 (Linux; Android 9; Android SDK built for x86 Build/PSR1.180720.075) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Mobile Safari/537.36","expiry": "2020-08-20T22:53:21.19705Z","timestamp": "2020-07-21T22:53:21.19705Z"},"oauth_token": {"access_token": "eyJhbGciOiJFUz...", // Validate this access token"id_token": "eyJhbGciOiJFUzI1...","refresh_token": "27944:lb31DY5pG229n...","expires_in": 3600,"token_type": "Bearer","auth_method": "OTP"},"token": {...},"user": {"ID": "643a42c7-316a-4abe-b27e-f4d0f903bfea", // Cotter uesr ID"identifier": "putri@cotter.app",...}}
This JSON object contains 3 objects, identifier , oauth_token and user .
The identifier object contains information about the user's email or phone number, device type and name, and expiry.
The
oauth_tokencontains anaccess_tokenthat you can validate in your backend.The
usercontains the User object in Cotter, which includes a "Cotter User ID". You should associate your user with this Cotter User ID for reference.
You should include this JSON Object into your call to your backend for Login or Registration. Your backend should then verify that the access token is valid.
Checkout how to verify the OAuth Tokens from Cotter here:
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:
