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
  • How to Add the WhatsApp Option
  • 1) Using verify.openAuth('PHONE')
  • 2) Using verify.openAuthWithInput('PHONE', this.state.phone)
  1. SDK Reference
  2. React Native
  3. Older SDK Versions

Sending Code via WhatsApp

PreviousSign in with Email/PhoneNextSign In with Device

Last updated 5 years ago

By default, when the user enters a phone number, we'll send a verification code using SMS. You can add the option for your users to receive the verification code as a WhatsApp message.

How to Add the WhatsApp Option

1) Using verify.openAuth('PHONE')

class Register extends PureComponent {
  ...
  openCotterAuth = async () => {
    var verify = new Verify(...);
    
    await verify.openAuth(
      'PHONE', 
      ['SMS', 'WHATSAPP'], // 👈 Add ['SMS', 'WHATSAPP'] as a parameter
    );
  };
};

Possible options are:

  • ['SMS'] (default, sms only)

  • ['SMS', 'WHATSAPP'] (allow both)

  • ['WHATSAPP'] (WhatsApp only)

2) Using verify.openAuthWithInput('PHONE', this.state.phone)

class Register extends PureComponent {
  ...
  openCotterAuth = async () => {
    var verify = new Verify(...);
    await verify.openAuthWithInput(
      'PHONE', 
      this.state.phone, 
      'WHATSAPP', // 👈 'WHATSAPP' as a parameter to automatically send code via WhatsApp
    );
  };
  
  
  // Possible options are:
  // - 'SMS'                (default, send code via SMS)
  // - 'WHATSAPP'           (send code via WHATSAPP)
  ...
}

Possible options are:

  • 'SMS' (default, send code via SMS)

  • 'WHATSAPP' (send code via WhatsApp)

WhatsApp Opt-In Requirements

WhatsApp requires that your application implement explicit user opt-ins to deliver messages over WhatsApp.

Since the in-app browser will automatically send the code via WhatsApp, you need to inform your users that we will send a message to their WhatsApp account. Make sure you make the following things clear:

  • The phone number that will receive the message

  • If necessary, add a text explaining what message you'll be sending, for example:"If you choose to login with WhatsApp, we will send a WhatsApp message to this number with a verification code".

Please make sure that your customer is informed that they will be receiving a WhatsApp message, otherwise your application may be suspended. This includes using the appropriate language that your users can understand.

If you choose to using where the user can enter email or phone in the in-app browser), update your code like below:

If you choose to input field, you can set it to automatically send the verification code via WhatsApp:

⚠️

That the user does an action (press a button or a checkbox) to acknowledge that the code is sent via WhatsApp (show the WhatsApp logo, using assets and color from )

📘
Read WhatsApp Opt-In Requirements
https://whatsappbrand.com/
PhoneChannels options
open the in-app browser with no predefined input
open the web browser after the user entered their email or phone number in your app's