React

To communicate with MojoAuth you will need some details about the application. These details are required for setup and initiate the implementation of Passwordless Login.

Getting Credentials

Register at MojoAuth

Here you just need to follow four simple steps:

1. Login to MojoAuth Dashboard:

2. Create your Fist Project by adding your Website URL and Project Name as displyed in the below screen:

3. Get your API Credentials, The API key and API Secret are used to interact with MojoAuth’s APIs.

4. Swtich Authentication Rules on from the settings tab on the dashboard. Then choose the type of Authenticator you want to select for e.g Passkey.

Integrate MojoAuth

To start Integrating MojoAuth in react, first create a react app using create-react-app and follow the following steps:

codeCopy

npm install create-react-app

1. Install MojoAuth npm module to creact a MojoAuth instance.

codeCopy

npm install mojoauth-web-sdk

2. Import React from ‘React’ in your App component.

jsxCopy

import React from "react";

3. Import MojoAuth from ‘mojoauth-web-sdk’ in your App Component.

jsxCopy

import MojoAuth from "mojoauth-web-sdk";

4. Use the UseState hook to create a state that would hold the user data after login. Set the initial state to null.

jsxCopy

const [payload, setPayload] = React.useState(null);

You can manage your data/state using react core APIs like context and useState or with any of the state management frameworks like Redux, MobX etc for complex data structures.

5. Create the MojoAuth instance using your API Key obtained from your MojoAuth dashboard in the Login component,and pass the source object.

jsxCopy

React.useEffect(() => {
  const mojoauth = new MojoAuth("Your MojoAuth API Key", {
    language: "language_code",
    redirect_url: "your_redirect_url",
    source: [{ type: "email", feature: "magiclink" }],
  });
}, []);

Choose your language and localize your website according to a country or region, checkout Localization guide for more details.

Redirect URL is used to redirect users to your custom url after successful authentication. Checkout Whitelist your domain for successful redirection to your domain URL.

6. To login using Email OTP or SMS Authentication, just change the source object.

javascriptCopy

{
  language: 'language_code',
  source: [{ type: "email", feature: "otp" }],
})

OR

javascriptCopy

{
  language: 'language_code',
  source: [{ type: "phone", feature: "otp" }],
})

You can also use multiple Authentication methods by passing multiple objects in source Array.

javascriptCopy

const mojoauth = new MojoAuth("Your MojoAuth API Key", {
  language: "language_code",
  redirect_url: "your_redirect_url",
  source: [
    { type: "email", feature: "magiclink" },
    { type: "phone", feature: "otp" },
  ],
});

7. Add the following div on your return function where you want the MojoAuth passwordless login form to be rendered.

jsxCopy

<div id="mojoauth-passwordless-form"></div>

MojoAuth passwordless login form will be rendered in the above div on your web page.

8. Add the MojoAuth passwordless login in the useEffect hook below the instance. Set the response to payload using setPayload in .then() function.

jsxCopy

mojoauth.signIn().then((payload) => {
  setPayload(payload);
});

9. After you have been logged in, enable Passkey form will be rendered if you have enabled it in your MojoAuth dashboard.

You can enable Passkey here or you can skip it to log in to your web application. After enabling Passkey, the prompt to enter your Security Key/Fingerprint will appear. As soon as you enter your key/fingerprint, your device will be registered and you will be logged in.

The next time you log in, you will directly be prompted to enter the key/fingerprint. After verifying you will be logged in.

10. Display the user data in JSON format using the payload state in the return function after the user is successfully logged in.

jsxCopy

<pre>{JSON.stringify(payload, null, 4)}</pre>

Example

jsxCopy

import React from "react";
import MojoAuth from "mojoauth-web-sdk";

function App() {
  const [payload, setPayload] = React.useState(null);

  //  1 Initialize and show the form
  React.useEffect(() => {
    const mojoauth = new MojoAuth("Your MojoAuth API Key", {
      language: "language_code",
      redirect_url: "your_redirect_url",
      source: [
        { type: "email", feature: "magiclink" },
        { type: "phone", feature: "otp" },
      ],
    });
    mojoauth.signIn().then((payload) => {
      setPayload(payload);
    });
  }, [payload]);

  return (
    <div>
      {/*  2 Put a <div> that will contain the form */}
      <div id="mojoauth-passwordless-form" />

      <pre>{JSON.stringify(payload, null, 4)}</pre>
    </div>
  );
}

export default App;

Mojouth Passwordless Login Flow

After completing the above steps the following will be the flow of passwordless login in your web application.

MojoAuth Login Interface

• User will enter their email address and if they have enabled Passkey they will be asked to verify their security key/fingerprint

  

• After successfully verifying their security key/fingerprint, they will be logged into their web application.

• Alternatively, they can opt to receive a link to login to their email address. On clicking the magic link user will be successfully verified and logged into the web application.

  

Enabling Passkey for logged-in user

• If the user skips enabling Passkey for the first time, ‘Enable Passkey’ function can be used to trigger Passkey registration once they have logged in.

Please check the code below for enablePasskey function:

javascriptCopy

mojoauth
  .enablePasskey(response.oauth.access_token)
  .then((response) => {
    // success
    console.log(response);
  })
  .catch((e) => {
    // handle the cancellation of Passkey
    console.log(e);
  });

or if you use await, try the below code-

javascriptCopy

try {
  var data = await mojoauth.enablePasskey(response.oauth.access_token);
  if (data.authenticated) {
    console.log("Passkey is Registered");
  }
} catch (error) {
  // handle the registration/login cancel
  console.log(error);
}

• Access token would be available in the payload under oauth after successful login.

Keep Reading

How to handle MojoAuth token?