Sending Successful Form Submission
Last updated
Last updated
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"}
/>