cotter
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.35 • Public • Published

    Cotter JS SDK

    npm version

    Cotter's JS SDK for Passwordless Authentication using Email/Phone Number. To read more about Cotter, get started with our 📚 integration guides and example projects.

    Questions

    Reach out on our Slack Channel to get the best response time.

    Install

    yarn add cotter

    or

    <script
      src="https://unpkg.com/cotter@0.3.14/dist/cotter.min.js"
      type="text/javascript"
    ></script>

    (Make sure you check the latest version. If you don't want to specify a specific version, check unpkg for a guide on how to specify versions).

    Usage

    You'll need an API_KEY_ID, which you can get by creating a free account at Cotter.

    import React from "react";
    import Cotter from "cotter";
    
    export default function Home() {
      useEffect(() => {
        var cotter = new Cotter(API_KEY_ID); // 👈 You need to add your API KEY ID
        cotter
          .signInWithLink()
          .showEmailForm()
          .then((payload) => {
            // Use the user information to register or login your users
            loginInOrRegisterMyServer(payload); // 👈 You need to define this function
          })
          .catch((err) => {
            // handle error here
            alert(error);
            console.log("OnError", error.data);
          });
      }, []);
    
      return (
        // ❗❗ This div needs to have "cotter-form-container" as the ID. ❗❗
        <div id="cotter-form-container" style={{ width: 300, height: 200 }}></div>
      );
    }
    • ApiKeyID: Your API_KEY_ID from Cotter

    Methods

    Sending Magic Link:

    cotter
      .signInWithLink() // use this
      .showEmailForm();

    Sending OTP:

    cotter
      .signInWithOTP() // use this
      .showEmailForm();

    Channels

    Sending to Email

    cotter.signInWithLink().showEmailForm(); // use this

    Sending to Phone Number

    cotter.signInWithLink().showPhoneForm(); // use this

    For more information about customization, check out our documentation.


    WebAuthn

    Integrating WebAuthn allows your website to authenticate users using TouchID or Windows Hello from their browser. You'll need an API_KEY_ID, which you can get by creating a free account at Cotter.

    import React, { useEffect, useState } from "react";
    import Cotter from "cotter"; //  1️⃣  Import Cotter
    
    function App() {
      const [payload, setpayload] = useState(null);
    
      //  2️⃣ Initialize and show the form
      useEffect(() => {
        var cotter = new Cotter(API_KEY_ID); // 👈 Specify your API KEY ID here
        cotter
          .signInWithWebAuthnOrLink() // sign in with WebAuthn or fallback to MagicLink
          .showEmailForm()
          .then((response) => {
            setpayload(response); // show the response in our state
          })
          .catch((err) => console.log(err));
      }, []);
    
      return (
        <div>
          {/*  3️⃣  Put a <div> that will contain the form with id "cotter-form-container" */}
          <div id="cotter-form-container" style={{ width: 300, height: 300 }} />
    
          <pre>{JSON.stringify(payload, null, 4)}</pre>
        </div>
      );
    }
    
    export default App;

    Fallback to Magic Link:

    cotter
      .signInWithWebAuthnOrLink() // use this
      .showEmailForm();

    Fallback to OTP:

    cotter
      .signInWithWebAuthnOrOTP() // use this
      .showEmailForm();

    Social Login

    Find the updated documentation here: Sign in with Social Login.

    Install

    npm i cotter

    DownloadsWeekly Downloads

    2,129

    Version

    0.3.35

    License

    ISC

    Unpacked Size

    2.34 MB

    Total Files

    127

    Last publish

    Collaborators

    • putrikarunia
    • albertputrapurnama
    • julianna-stytch