Cotter
  • 🚀Getting Started
  • Features & Concepts
    • 💬Sign In with Email/Phone Number
    • 🔐Sign In with Device
      • How it works
    • 🧬Sign In with WebAuthn
  • 📌Quickstart Guides
    • All Guides & Tutorials
    • HTML – Sign in with Email/Phone
    • React – Sign in with Email/Phone
    • React – WebAuthn
    • ▲ Next.js
    • Angular
    • Webflow
    • Bubble.io
    • Python SDK for a CLI
    • React Native – Sign in with Device
    • iOS – Sign in with Device
    • Flutter – Sign in with Device
  • 📘SDK Reference
    • Web
      • Sign In with Email/Phone Number
        • Customize the Form
        • Checking the email or phone before sending a verification code
        • Sending Code or Link via WhatsApp
        • Styling
        • Older SDK
          • Customize the Form
      • Sign in with Social Login
        • Getting Access Tokens from Social Login Providers
        • Github Instructions
        • Google Instructions
      • Sign In with WebAuthn
        • Register WebAuthn for a logged-in user
      • Sign In with Device
        • Steps for Pop Up Authentication Prompt
        • Advanced Customization for Login Form
        • Advanced Customization for Pop Up Authentication Prompt
      • Getting Access Token and Logged-In User Info
      • Sending Successful Form Submission
      • FAQ & Troubleshooting
    • React Native
      • Installation
      • Sign In with Device
        • Add Email/Phone Verification
        • Authenticate from a Non-Trusted Device
        • Add a new Trusted Device
        • Remove Trusted Device
      • Sign In with Email/Phone Number
      • Getting Stored OAuth Tokens and User Information
      • FAQ
      • Older SDK Versions
        • Sign in with Email/Phone
        • Sending Code via WhatsApp
        • Sign In with Device
          • Authenticate from a Non-Trusted Device
          • Add a new Trusted Device
          • Customization
    • Flutter
      • Sign In with Device
        • Add Email/Phone Verification
        • Authenticate from a Non-Trusted Device
      • Sign in with Email/Phone Number
      • Getting the Logged-in User
      • Getting OAuth Tokens
      • Signing a User Out
    • iOS
      • Sign In with Email/Phone Number
      • Sign In with Device
        • Authenticate from a Non-Trusted Device
        • Push Notification
        • Check if Trusted Device is Enrolled
        • Add a New Trusted Device
        • Remove Trusted Device
      • Older Versions
        • Biometric/Pin
    • Android
      • Sign In with Device
        • Authenticate from a Non-Trusted Device
        • Check if Trusted Device is Enrolled
        • Add a new Trusted Device
        • Remove Trusted Device
        • Customization
      • Sign In with Email/Phone Number
      • Biometric/Pin
        • Advanced Methods
        • Customization
        • Setting Strings
        • Styling
      • Older SDK Version
        • Sign In with Device
          • Authenticate from a Non-Trusted Device
    • Python (for CLI)
    • API for Other Mobile Apps or CLI
      • Verify Email/Phone Number
        • Handling URL Scheme
    • Backend: Handling Response
  • 🛡️ Protecting Your Account
    • Only Allow Your Website/App to Use Your API Key
    • Rate Limit
    • Enable reCAPTCHA to Protect Against Automated Abuse
  • 🗝️ Getting Access Token
    • Cotter's OAuth 2.0 Tokens Specification
    • Getting the Tokens
      • Get Tokens during Authentication
      • Using the Refresh Token
    • Storing and Removing Tokens
    • Renewing Expired Tokens
    • Verifying JWT Tokens
    • Requesting Custom Fields on your JWT Token
    • Older API
      • Using HTTP Requests
      • Getting the Tokens
        • During Authentication
          • During Email/Phone Verification
        • During enrolling Trusted Devices
  • 🔌API Reference
    • User API
      • User Object
    • OAuth Tokens API
      • Verify JWT Token using API (serverless)
      • Requesting Custom Claims on your Access Token
      • Older API
    • OAuth Tokens from Social Login
    • Event Object
    • Reset PIN API
  • Older API
    • Validating Cotter's Identity Token
    • Validating Cotter's Event Response
Powered by GitBook
On this page
  • What you're building
  • Import Cotter as a dependency
  • Step 1: Import and Initialize Cotter
  • Step 2: Make a Sign Up Function
  • Step 3: Make a Login Function
  • Validating Cotter's Access Token
  • 🎉 You're done!
  • Add Email/Phone Verification
  • Getting the Logged-in User
  • Getting OAuth Tokens
  1. SDK Reference
  2. Flutter

Sign In with Device

Our Flutter SDK offers the easiest way to integrate Cotter's Sign In with Device. You can simply call a function and it does most of the heavy lifting and authentication for you.

PreviousFlutterNextAdd Email/Phone Verification

Last updated 4 years ago

Concepts: Learn about how works.

There are major updates planned for this feature. so we can help you prepare for it.

What you're building

Import Cotter as a dependency

Add Cotter to your pubspec.yaml , then run flutter pub get.

dependencies:
  cotter:

Step 1: Import and Initialize Cotter

Import Cotter in your lib/main.dart, then initialize it inside HomePageState.

import 'package:cotter/cotter.dart'; // Import Cotter

class HomePageState extends State {
  ...

  // 1️⃣ Initialize Cotter
  Cotter cotter = new Cotter(apiKeyID: API_KEY_ID); // 👈 Specify your API KEY ID here

  // 2️⃣ TODO: Make Sign Up Function
  // 3️⃣ TODO: Make Login Function
  
  @override
  Widget build(BuildContext context) { ... }
}

Step 2: Make a Sign Up Function

  // 2️⃣  Make Sign Up Function
  void signUp(BuildContext context) async {
    try {
      // 🚀 One-line Sign Up
      // Create a new user in Cotter and trust the current device
      var user = await cotter.signUpWithDevice(identifier: inputController.text);
      print(user);
    } catch (e) {
      print(e);
    }
  }

(Optional) You can also verify the user's email or phone number at this step

To verify the user's email or phone number, follow this guide after you've finished this one.

Step 3: Make a Login Function

  // 3️⃣  Make Login Function
  void login(BuildContext context) async {
    try {
      // 🚀 One-line Login
      var event = await cotter.signInWithDevice(identifier: inputController.text, context: context);
      print(event);
    } catch (e) {
      print(e);
    }
  }

To get the Logged-in User Info and Access Token, follow this section:

Logging-in From a Trusted Device

If the user logged-in from a trusted device, their login request will automatically be approved.

Logging-in From a Non-Trusted Device

If the user logged-in from a different device that is not trusted, they will be presented with a prompt asking them to approve the login from their trusted phone inside your app. We'll cover this in the next guide.

Validating Cotter's Access Token

Checkout how to verify the OAuth Tokens from Cotter here:

🎉 You're done!

Add Email/Phone Verification

You can also verify your user's email or phone number during the sign up process.

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 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:

Check the latest releases in . 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 .

You can to get your API_KEY_ID.

Make sure you allow Trusted Devices Method in the .

To sign up, call cotter.signUpWithDevice and input the user's email. This will create a new user in Cotter and trust the current device to allow logins. This function returns the .

To sign in, call cotter.signInWithDevice . If the user is logging-in from a device that they trust, they'll automatically be approved. This function returns the .

📘
pub.dev
following the installation instructions
create a free account at Cotter
dashboard
User object
Add Email/Phone Verification
Event object
Getting OAuth Tokens
Getting the Logged-in User
Verifying JWT Tokens
Add Email/Phone Verification
Getting the Logged-in User
Getting OAuth Tokens
Sign in with Device
Contact us in Slack
Sign In with Device using Cotter's Flutter SDK