Node JS

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.

Let's Get your React App running with SAWO 🙌
 
Requirements
Node [Version 12.x+ ] , Node Package Manager (NPM) [Version 6.x+]
Steps
1. Install express by running
1
npm install express
Copied!
2. Make endpoints in index.js file and serve your HTML files
1
const express = require("express");
2
const app = express();
3
​
4
const path = require("path");
5
app.use(express.static(path.join(__dirname, "public")));
6
​
7
app.get("/", (req, res) => {
8
  res.sendFile(__dirname + "/index.html");
9
});
10
​
11
app.get("/login", (req, res) => {
12
  res.sendFile(__dirname + "/public/login.html");
13
});
14
​
15
app.get("/success", (req, res) => {
16
  res.sendFile(__dirname + "/public/success.html");
17
});
18
​
19
app.listen("3000", console.log("Listening on port 3000."));
Copied!
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. The body of the HTML login page should look like this for showing the SAWO login form:
1
<body>
2
  <div id="sawo-container" style="height: 300px; width: 300px"></div>
3
​
4
  <script src="https://websdk.sawolabs.com/sawo.min.js"></script>
5
  <script>
6
    // Fetching payload from sessionStorage
7
    const payload = sessionStorage.getItem("payload");
8
    if (payload) {
9
      // If the payload is available, that means the user has logged in already.
10
      // So redirecting back to "/login"
11
      window.location.href = "/success";
12
    }
13
    var config = {
14
      // should be same as the id of the container created on 3rd step
15
      containerID: "sawo-container",
16
      // can be one of 'email' or 'phone_number_sms'
17
      identifierType: "email",
18
      // Add the API key copied from 2nd step
19
      apiKey: "Your API Key",
20
      // Add a callback here to handle the payload sent by sdk
21
      onSuccess: (payload) => {
22
        // Storing the payload in sessionStorage
23
        sessionStorage.setItem("payload", JSON.stringify(payload));
24
        // Redirecting to "/success"
25
        window.location.href = "/success";
26
      },
27
    };
28
    var sawo = new Sawo(config);
29
    sawo.showForm();
30
  </script>
31
</body>
Copied!
You can store the payload to the sessionStorage, database, or integrate CRM and can take actions according to that.
7. 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 Login.
Congratulations !! The SAWO API is now ready to be used in your Node application 🤘.  
You can also check out SAWO's Node Sample Code.
It's okay, we get it! You got Stuck! 😞
 Feel free to contact us on #ask-for-help on our Discord​
FAQs

Web Apps - Previous

Laravel

Next - Mobile-Development

Android

Last modified 1mo ago

Copy link

Contents

Let's Get your React App running with SAWO

Requirements

Steps

Let's Get your React App running with SAWO 🙌

Requirements

Steps

You can also check out SAWO's Node Sample Code.

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

Let's Get your React App running with SAWO
🙌

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