NUXT - SAWO

Nuxt.js is a free and open source JavaScript library based on Vue.js, Node.js, Webpack and Babel.js. Nuxt is inspired by Next.js, which is a framework of similar purpose, based on React.js.

Let's Get your NEXT App running with SAWO
Requirements
Node [Version 12.x+ ] , Node Package Manager (NPM) [Version 6.x+]
Steps
1. The first step to getting started with SAWO API integration into your NEXT web page is to install the sawo package as given below:
npm i sawo
2. After installation is done, you have to import the Sawo class from the installed sawo package to the top of the file:
import Sawo from "sawo"
3. To use SAWO Login you would need an API key which can be obtained by creating a project in the sawo dashboard. 
4.  Once you create your project, you would need to set your project name and hostname.
    4.1. For development in a local machine, the hostname should be set to 'localhost'.
If using ''localhost" as hostname is not working for you, try "127.0.0.1" 🤓
 
    4.2. For production, the hostname should be set to your domain. 
If you are adding your domain do not add 'https://', ''http://', 'www' or even trailing backslash.
Example:
https://dev.sawolabs.com/ should be kept as dev.sawolabs.com
5. Copy the API key from the project and keep it safe and secure.
The best practice to store your API key is to store values in .env  so that they are not exposed.
6. Initialize SAWO and render the form according to the following steps:
As part of this step, a container has to be created for the SAWO component. This has to be done on your project’s source file.
<div id="sawo-container"></div>
<style>
  #sawo-container {
    width: 400px;
    height: 400px;
  }
</style>
Every added custom field should be accompanied by an65px increase in the component height.
Some configurations have to be checked as given below. The code given below should help in the same.
 var config = {
        // should be same as the id of the container created on 3rd step
        containerID: "<container-ID>",
        // can be one of 'email' or 'phone_number_sms' or 'both_email_phone'
        identifierType: "phone_number_sms",
        // Add the API key copied from 2nd step
        apiKey: "",
        // Add a callback here to handle the payload sent by sdk
        onSuccess: (payload) => {},
    };
Then a SAWO instance has to be created using the code given below:
this.Sawo = new Sawo(config)
The showForm method should be called thereafter as the showForm method is responsible for rendering the form in the given container.
this.Sawo.showForm()
7.  Below code-block can be used as a reference after you have completed setting up your project:
<template>
  <div class="containerStyle">
    <section>
      <div id="sawo-container"></div>
    </section>
  </div>
</template>
 
<script>
  import Sawo from 'sawo'
  export default {
    name: 'Sawo',
    mounted() {
      const config = {
        // should be same as the id of the container
        containerID: 'sawo-container',
        // can be one of 'email' or 'phone_number_sms'
        identifierType: 'email',
        // Add the API key
        apiKey: API_KEY,
        // Add a callback here to handle the payload sent by sdk
        onSuccess: (payload) => {
        },
      }
      this.Sawo = new Sawo(config)
      this.Sawo.showForm()
    },
  }
</script>
 
<style>
  #sawo-container {
    width: 400px;
    height: 400px;
  }
</style>
8. Once the SAWO SDK is successfully set up, a login form will be rendered in the provided container as displayed in the picture below:
Final Render of SAWO SDK
User verification
Using custom POST-endpoint https://api.sawolabs.com/api/v1/userverify/ and with the following key-value pair as body:
{
    "user_id": "a0aca1a0-7460-4e8e-8e46-3baf2c92423d",
    "verification_token" : "ADdHrvkgi407qNfnAyrIVqokm3OWdKUCdj8y"
}
you can verify the incoming user. If the user is valid it would return a response code of 200 with the following payload:
{
  "user_valid": true
}
For more go to the User Verification Page. 
Congratulations !! The SAWO API is now ready to be used in your NEXT application 🤘.  
You can also check out SAWO's 
 NUXT Sample Code and Deployed App.
It's okay, we get it! You got Stuck! 😞
 Feel free to contact us on #ask-for-help on our Discord​
Doc was created by Divya Sri Darimisetti​
What to do with your Payload?
FAQs

Server Side Rendering - Previous

Next - Web Apps

Flask

Last modified 3mo ago

Copy link

Outline

Let's Get your NEXT App running with SAWO

Requirements

Steps

Let's Get your NEXT App running with SAWO

Requirements

Steps

You can also check out SAWO's NUXT Sample Code and Deployed App.

It's okay, we get it! You got Stuck! 😞 Feel free to contact us on #ask-for-help on our Discord​

Doc was created by Divya Sri Darimisetti​

You can also check out SAWO's
NUXT Sample Code and Deployed App.

It's okay, we get it! You got Stuck!
😞
Feel free to contact us on #ask-for-help on our Discord

Doc was created by Divya Sri Darimisetti