Integrating SAWO Labs Authentication + Create React App

Subscribe to my newsletter and never miss my upcoming articles

Frame 14.png

Hello there, I was working on building a simple authentication application using SAWO Labs. On the way, I found out, that there is a need to know more than the official documentation.

Here goes a brief walkthrough of how you can integrate SAWO Labs Authentication with a React Application.

In Our small app:

  • We are going to have a Login Page
  • We are going to have a Dashboard Page.
  • An Authenticated User only can enter the Dashboard Page.
  • We are going to use VSCode, and NPM as our package manager.

Lets start

  • You need SAWO Labs Account in order to use this awesome stuff. Head over to sawolabs.com and create your first project, and set the Host to localhost, if you chose to develop locally. Otherwise, you can set Host as your application URL.

  • You may use CodeSandbox react template, or if you are doing it locally, use the following command: npx create-react-app client

  • 10 Mins later

  • We need to have the SAWO labs package in our node_modules. So head over to the terminal, make sure, you have done cd client and run the following command to install the SAWO package, npm i sawo.

  • Once the package is installed, you shall head over to src/app.js

  • Clean the file, by removing unnecessary code and the final look of src/app.js looks like.
/* src/app.js */

import React from "react";
import "./App.css";
function App() {
  return (
    <div id="App">

    </div>
  );
}

export default App;
  • Let's import SAWO Package.
import React from "react";
import "./App.css";
import Sawo from "sawo";
  • Save your API Key in the .env.local file and make sure, you have added it before itself in .gitignore. The .env.local file should look like:
REACT_APP_API_SAWO=11example1-821fexampled23-19830-318example2312
  • Let's head over to src/app.js. Based on the 5th point in docs here. Our file should look like this finally.

/* src/app.js */

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import Sawo from "sawo";
function App() {
   return (
         <div
          id="sawo-container"
          style={{ height: "300px", width: "300px" }}
        ></div>
  );
}

export default App;
  • Congratulations, but if you see your application on the browser, well we see blank, nothing yet. Now it's time, to call the SDK !! :)

The Crux Point

We need to call the SDK when our div with id as sawo-container is rendered. So we are going to use, React.useEffect() hook in order to suffice this condition in file src/app.js.


/* src/app.js */

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import Sawo from "sawo";
function App() {


/*
This makes sure when the component is rendered, 
it is called only once.
*/
React.useEffect(() => { }, []); 


 return (
         <div
          id="sawo-container"
          style={{ height: "300px", width: "300px" }}
        ></div>
  );
}

export default App;
  • It's time to write, the config for SAWO Authentication, as discussed in the 6th point in their docs here We are going to put it inside, the useEffect hook. Why? because we want to execute this after the component is mounted on the screen.

  • After preparing the config, we are going to create a new SAWO Instance with the config and we are going to execute the showForm method. Finally useEffect looks like this

React.useEffect(() => {
  var config = {
      containerID: "sawo-container",
      identifierType: "email",
      apiKey: process.env.REACT_APP_API_SAWO,
      onSuccess: (payload) => {
        console.log(payload); 
      },
    };
    let sawo = new Sawo(config);
    sawo.showForm();
 }, []);
  • Lets Head over to the application, on browser, Now you would notice, the SAWO Authentication asking for your email id :)

image.png

Dashboard Connection.

  • We are going to create a file src/Dashboard.js, which looks like this.
import React from "react";

const Dashboard = (props) => {

  return (
    <>
       <h2>Private Dashboard</h2>
        Email: {props.payload.identifier}
    </>
  );
};

export default Dashboard;
  • Head over to src/app.js and we are performing the following operations.
    • We need to import our Dashboard Component in App.
    • We need to create a state, which stores, the payload after the user is authenticated.
    • Let's do it.

/* src/app.js */

import React from "react";
import logo from "./logo.svg";
import "./App.css";

/* This imports Dashboard Component*/
import Dashboard from './dashboard'

import Sawo from "sawo";
function App() {

/* We are creating a state, using the useState hook. */

let [payload, setPayload] = React.useState(false);

/*
This makes sure when the component is rendered, 
it is called only once.
*/
React.useEffect(() => {
  var config = {
      containerID: "sawo-container",
      identifierType: "email",
      apiKey: process.env.REACT_APP_API_SAWO,
      onSuccess: (payload) => {
        // console.log(payload); 
        setPayload(payload)
      },
    };
    let sawo = new Sawo(config);
    sawo.showForm();
 }, []); 


 return (<>
         <div
          id="sawo-container"
          style={{ height: "300px", width: "300px" }}
        ></div>
        {payload && (
        <>
          <Dashboard payload={payload} />
        </>
        )}
</>
  );
}

export default App;

No Comments Yet