Sending Successful Form Submission

If you configured sending successful form submission on the dashboard, and you're using the JS SDK (cotter or cotter-react), you can add the following to your success function:


import Cotter, { CotterEnum } from 'cotter';

var cotterApiKeyID = "<YOUR_API_KEY_ID>"
var cotter = new Cotter(cotterApiKeyID); // 👈 Specify your API KEY ID here
var formID = "form_default"
cotter
  .withFormID(formID) // Use customization for form "form_default"
  .signInWithLink() // Sign In with Magic Link
  .showPhoneForm() // Send Magic Link via Phone Number
  .then((resp) => {   
  
      // == 
      // RUN SUCCESSFUL FORM SUBMISSION 
      // SETUP THAT YOU HAVE IN THE DASHBOARD 
      // ==
      fetch(`${CotterEnum.WorkerURL}/completion/form?form-id=${encodeURIComponent(formID)}`,{
          method: "POST",
          headers: {
            API_KEY_ID: cotterApiKeyID,
            "Content-type": "application/json",
          },
          body: JSON.stringify(resp),
        }).then((_) => {
            window.location.href = "/protected";// redirect to the protected page
        })       
      // == 
      
  })
  .catch(err => {
    console.log(err) // handle error
  });

import { LoginForm } from "cotter-react";
import { CotterEnum } from 'cotter';
//...

const onSuccess = (resp) => {
  // == 
  // RUN SUCCESSFUL FORM SUBMISSION 
  // SETUP THAT YOU HAVE IN THE DASHBOARD 
  // ==
  fetch(`${CotterEnum.WorkerURL}/completion/form?form-id=${encodeURIComponent(formID)}`,{
      method: "POST",
      headers: {
        API_KEY_ID: cotterApiKeyID,
        "Content-type": "application/json",
      },
      body: JSON.stringify(resp),
    }).then((_) => { 
        window.location.href = "/protected";// redirect to the protected page
    })       
  // == 
}

//...
<LoginForm
  type="EMAIL" // - EMAIL or PHONE
  authMethod="MAGIC_LINK" // - OTP or MAGIC_LINK
  onSuccess={onSuccess} // - A function that runs after the login/signup is successful
  onError={(err) => console.log(err)} // - A function that runs if the login/signup encountered an error
  width={340} // - Width & height of the form
  height={300} //  Recommended at least 300x300
  formID={"form_default"}
/>

PreviousGetting Access Token and Logged-In User Info NextFAQ & Troubleshooting

Last updated 4 years ago

import Cotter, { CotterEnum } from 'cotter'; var cotterApiKeyID = "<YOUR_API_KEY_ID>" var cotter = new Cotter(cotterApiKeyID); // 👈 Specify your API KEY ID here var formID = "form_default" cotter .withFormID(formID) // Use customization for form "form_default" .signInWithLink() // Sign In with Magic Link .showPhoneForm() // Send Magic Link via Phone Number .then((resp) => { // == // RUN SUCCESSFUL FORM SUBMISSION // SETUP THAT YOU HAVE IN THE DASHBOARD // == fetch(`${CotterEnum.WorkerURL}/completion/form?form-id=${encodeURIComponent(formID)}`,{ method: "POST", headers: { API_KEY_ID: cotterApiKeyID, "Content-type": "application/json", }, body: JSON.stringify(resp), }).then((_) => { window.location.href = "/protected";// redirect to the protected page }) // == }) .catch(err => { console.log(err) // handle error });

import { LoginForm } from "cotter-react"; import { CotterEnum } from 'cotter'; //... const onSuccess = (resp) => { // == // RUN SUCCESSFUL FORM SUBMISSION // SETUP THAT YOU HAVE IN THE DASHBOARD // == fetch(`${CotterEnum.WorkerURL}/completion/form?form-id=${encodeURIComponent(formID)}`,{ method: "POST", headers: { API_KEY_ID: cotterApiKeyID, "Content-type": "application/json", }, body: JSON.stringify(resp), }).then((_) => { window.location.href = "/protected";// redirect to the protected page }) // == } //... <LoginForm type="EMAIL" // - EMAIL or PHONE authMethod="MAGIC_LINK" // - OTP or MAGIC_LINK onSuccess={onSuccess} // - A function that runs after the login/signup is successful onError={(err) => console.log(err)} // - A function that runs if the login/signup encountered an error width={340} // - Width & height of the form height={300} // Recommended at least 300x300 formID={"form_default"} />