Olá! Eu estava trabalhando na construção de um aplicativo de autenticação simples usando o SAWO Labs. Durante o processo, descobri que era necessário saber mais do que a documentação oficial fornecida.

Aqui está um breve passo a passo para ajudá-lo a integrar a autenticação do SAWO Labs com um aplicativo React.

Em nosso pequeno aplicativo:

• Teremos uma página de login.
• Teremos uma página de painel.
• Apenas um usuário autenticado pode entrar na página do painel.
• Vamos usar VSCode e NPM como nosso gerenciador de pacotes.

• Você precisa de uma conta SAWO Labs para usar este material incrível. Cabeça sobre a sawolabs.com e criar seu primeiro projeto, e definir o anfitrião para localhost, se você escolheu para desenvolver localmente. Caso contrário, você pode definir o Host como o URL do seu aplicativo.
• Você pode usar CodeSandbox Reagir modelo, ou se você está fazendo isso localmente, use o seguinte comando: npx create-react-app client.
• 10 minutos depois ...
• Precisamos ter o pacote SAWO labs em nosso node_modules. Então cabeça para o terminal, certifique-se, você entrou cd cliente execute o seguinte comando para instalar o pacote SAWO: npm i sawo.
• Assim que o pacote estiver instalado, você deve ir para src/app.js.
• Limpe o arquivo removendo o código desnecessário e a aparência final de src / app.js deve ser assim:

/* src/app.js */
import React from "react";
import "./App.css";
function App() {
  return (
    <div id="App">
    </div>
  );
}
export default App;

import React from "react";
import "./App.css";
import Sawo from "sawo";

REACT_APP_API_SAWO=11example1-821fexampled23-19830-318example2312

/* 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;

Precisamos chamar o SDK quando nosso divcom id as sawo-containerfor renderizado. Portanto, vamos usar o React.useEffect()gancho para preencher essa condição no arquivo 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;

• Depois de preparar a configuração, vamos criar uma nova instância SAWO com o confige vamos executar o showFormmétodo. Finalmente, useEffectfica assim:

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();
 }, []);

• Vamos criar um arquivo src/Dashboard.jsparecido com este.

import React from "react";
const Dashboard = (props) => {
  return (
    <>
       <h2>Private Dashboard</h2>
        Email: {props.payload.identifier}
    </>
  );
};
export default Dashboard;

• Precisamos importar nosso componente do painel no aplicativo.
• Precisamos criar um estado que armazene a carga útil após a autenticação do usuário.

/* 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;

Mais conteúdo em plainenglish.io