Integrating Llamauth with Your React Application

Now that you’ve created and tested your tool in Llamauth, it’s time to integrate it into your React application. Our simple npm library makes this process straightforward and efficient.

Getting Started with Create React App

If you’re starting a new project or integrating Llamauth into an existing React application, refer to the Create React App documentation (opens in a new tab) for setup instructions.

Installation

Install the Llamauth npm package by running the following command in your project’s root directory:

npm install llamauth

You can also view the official package on npm (opens in a new tab).

Integration Example

Below is an example of how to integrate the Llamauth library within a React component. In this example, the loginWithLamauth function is triggered when the user clicks the sign-in button:

import React, { useState } from "react";
import { loginWithLamauth } from "llamauth";
 
const SignIn = () => {
  const [isLoading, setIsLoading] = useState(false);
 
  const handleAuthLogin = async (token, provider) => {
    // Process the authentication token as needed
    console.log("Authenticated token:", token);
    // Continue with your application’s login flow
  };
 
  const githubAuthLogin = async (token) => {
    await handleAuthLogin(token, "github");
  };
 
  return (
    <div>
      <button
        onClick={() =>
          loginWithLamauth({
            key: "<Your Llamauth API Key>",
            callback: githubAuthLogin,
            uuid: "<Your Tool ID from Llamauth>",
          })
        }
      >
        Sign in with GitHub
      </button>
    </div>
  );
};
 
export default SignIn;

Function Parameters Explained

• key: Your unique Llamauth API key.
• callback: A function (e.g., githubAuthLogin) that processes the authentication token returned by Llamauth.
• uuid: The unique tool ID generated in your Llamauth dashboard.

When a user signs in, Llamauth retrieves an OAuth token and passes it to your application. With this token, you can access user profile details such as email, username, and profile picture. Additionally, you can use provider-specific integrations—for instance, fetching pull requests or repositories from GitHub, or accessing OneDrive data from Microsoft.

Remember, you can attach loginWithLamauth to any button or event handler, giving you the flexibility to integrate it seamlessly into your application’s workflow.

Live Demo

Below is a demo of Llamauth in action. We even use Llamauth on our own platform’s sign-in page:

By following these steps, you’ll seamlessly integrate Llamauth into your React application, streamlining the authentication process and enhancing user security. Enjoy building with Llamauth!