Ionic App(React - Typescript)
Ionic is a complete open-source SDK for hybrid mobile app development

Let's Get your Ionic App running with SAWO
🙌

Steps

1. The first step to getting started with SAWO API integration into your Ionic App is to install the sawo package as given below:
1
npm i sawo
Copied!
2. Create a login.tsx component in your components folder.
3. After installation is done, you have to import the Sawo class from the installed sawo package to the top of the file:
1
import Sawo from "sawo"
Copied!
4. To use SAWO Login you would need an API key which can be obtained by creating a project in the sawo dashboard.
5. Once you create your project, you would need to set your project name and hostname. 5.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"
🤓
5.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
6. 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.
7. Create a functional component named Login which returns a div that has the id as “sawo-container”
8. The sawo-container div can be styled as per the user’s choice.
9. Within the functional component, create a useEffect hook and declare a config object which holds the identifier type, api key, container id, and an onSuccess callback
    1.
    1
    var config = {
    2
    // should be same as the id of the container created on 3rd step
    3
    containerID: "<container-ID>",
    4
    // can be one of 'email' or 'phone_number_sms'
    5
    identifierType: "phone_number_sms",
    6
    // Add the API key copied from 2nd step
    7
    apiKey: "",
    8
    // Add a callback here to handle the payload sent by sdk
    9
    onSuccess: (payload) => {},
    10
    };
    Copied!
    2.
    The container ID is the div with the id “sawo-container”, this div will hold the login form generated by sawo.
    3.
    Identifier type can be email or phone_number_sms
    4.
    Api key is copied from the dashboard or taken from the sawo-keys csv file that is downloaded once the project is created
    5.
    The onSuccess callback can be user defined. It takes the payload returned after successful authentication as a parameter. The payload can be stored in session or local storage, can be sent in the body of a post request to your server and save it in the database. In Typescript, the type of the payload object needs to be set to object
10. Create an instance off of the Sawo class by passing the config object to the Sawo constructor
11. Using the Sawo instance, invoke the showForm() method.
12. From the client dashboard, you can customize the Sawo login form using different designs, styles and by additional form fields.
13. 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 🤘.

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

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

Last modified 23d ago