Integrate

Integrate in your code the authentication flow, follow the next steps.

Install the authentication widget

npm

npm install @nuveraxgroup/widget

yarn

yarn add @nuveraxgroup/widget

info

The Widget module comes with Typescript types definitions.

Update your code

Add the NxWhatsApp authentication app context in your app.

src/index.tsx

import React from "react";
import { NxWhatsApp } from "@nuveraxgroup/widget";
import App from "./App";

const rootElement = document.getElementById("root")!;
const root = ReactDOM.createRoot(rootElement);

root.render(
  <React.StrictMode>
    <NxWhatsApp>
      <App />
    </NxWhatsApp>
  </React.StrictMode>
);

Add Sign In with WhatsApp button.

src/login.tsx

import "./styles.css";
import React from "react";
import { WhatsAppWidget } from "@nuveraxgroup/widget";

export const Login = () => {
    const onAuthResult = (isAuth: boolean, token: string) => {
        /* Add your successful authentication logic here */
    }
    return (
    <div className="App">
      <h1>Login to Access</h1>
      <WhatsAppWidget
        appId="{ADD_YOUR_APP_ID}"
        onAuthResult={onAuthResult}
      />
    </div>
  );
}

info

Replace {ADD_YOUR_APP_ID} placeholder with your app id.

Now you have integrated the login button in your application.

For an advanced example please check the next code example.