Electron

Electron is a free and open-source software framework developed and maintained by GitHub. It allows for the development of desktop GUI applications using web technologies.

Let's Get your React App running with SAWO 🙌
 
Steps
1. To use SAWO Login you would need an API key which can be obtained by creating a project in the sawo dashboard. 
2.  Once you create your project, you would need to set your project name and hostname.
    2.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" 🤓
 
    2.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
3. 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.
4. On your source, create a container for sawo component inside body tag
1
<div id="sawo-container" style="height: 300px; width: 300px;"></div>
Copied!
Every added custom field should be accompanied by a 50px increase in the component height.
5. Include sawo-electron.min.js to your source, follow either of following method 1. If you have Content Security Policy enabled, download the sawo-electron.min.js using following command and include it in your root source directory
1
wget https://websdk.sawolabs.com/sawo-electron.min.js
2
​
Copied!
If you don't have Content Security Policy enabled, include sawo-electron.min.js in your source using
1
<script src="https://websdk.sawolabs.com/sawo-electron.min.js"></script>
Copied!
6. Add the snippet at bottom of source inside body tag
1
<script>
2
    var config = {
3
        // should be same as the id of the container created on 3rd step
4
        containerID: "sawo-container",
5
        // can be one of 'email' or 'phone_number_sms'
6
        identifierType: "phone_number_sms",
7
        // Add the API key copied from 2nd step
8
        apiKey: "",
9
        // Add a callback here to handle the payload sent by sdk
10
        onSuccess: (payload) => {
11
            console.log(payload)
12
        },
13
    };
14
    var sawo = new Sawo(config);
15
    sawo.showForm();
16
</script>
Copied!
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 React application 🤘.  
It's okay, we get it! You got Stuck! 😞
 Feel free to contact us on #ask-for-help on our Discord​
FAQs
​

No Code - Previous

Wordpress

Next - Additonal Content

What to do with your Payload?

Last modified 1mo ago

Copy link

Contents

Let's Get your React App running with SAWO

Steps

Let's Get your React App running with SAWO 🙌

Steps

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