SAWO React Component
React is a free and open-source front-end JavaScript library for building user interfaces or UI components. A Component is one of the core building blocks of React.

Let's get your React Component 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 React web page is to install the sawo-react package as given below:
1
npm i sawo-react
Copied!
2. After installation is done, you have to import the SawoLogin class from the installed sawo package to the top of the file:
1
import SawoLogin from 'sawo-react'
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. Initialize SAWO and render the form according to the following steps:
    Define a callback function
1
function sawoLoginCallback(payload) {
2
console.log(payload)
3
}
Copied!
    Make a config object. The code given below should help in the same.
1
const sawoConfig = {
2
onSuccess: sawoLoginCallback, //required
3
identifierType: 'email', //required must be one of: 'email', 'phone_number_sms',
4
apiKey: '', //required get it from sawo dev.sawolabs.com,
5
containerHeight: '300px', //required the login container height, default is 300px
6
}
Copied!
Every added custom field should be accompanied by an 65px increase in the component height.
    Add the react component to the main page where the Login Component has to render.
1
<SawoLogin config={sawoConfig}/>
Copied!
7. Below code-block can be used as a reference after you have completed setting up your project:
1
import React, { useEffect } from 'react'
2
import SawoLogin from 'sawo-react'
3
​
4
const LoginPage = () => {
5
​
6
function sawoLoginCallback(payload) {
7
console.log(payload)
8
}
9
10
const sawoConfig = {
11
onSuccess: sawoLoginCallback //required,
12
identifierType: 'email' //required, must be one of: 'email', 'phone_number_sms',
13
apiKey: '' // required, get it from sawo dev.sawolabs.com,
14
containerHeight: '300px', // the login container height, default is 300px
15
}
16
​
17
return (
18
<div>
19
<SawoLogin config={sawoConfig}/>
20
</div>
21
)
22
}
23
​
24
export default LoginPage
Copied!
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 Login
Congratulations !! The SAWO API Component is now ready to be used in your React application 🀘.

You can also check out SAWO's Deployed App.

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

Last modified 19d ago