Firstline React

This library enables you to add authentication to your React app.

Helpful resources

• Quick setup - our guide for quickly adding login, logout and user information to a React app using Firstline.
• React sample app - a full-fledged React application integrated with Firstline.
• Firstline docs - explore our docs site and learn more about Firstline.

Getting started

1. Setup Firstline Application & API

1. Follow the Quick setup to configure a Firstline Application.
2. Add a Firstline API as shown in Secure API.

Important: Don't forget to configure the Application URIs.

2. Installation

Using npm:

npm install @first-line/firstline-react

Using yarn:

yarn add @first-line/firstline-react

Hint: You can also try out our React sample app.

3. Wrap your React app with Firstline context.

Wrap your app with the Firstline context. Replace DOMAIN, API_IDENTIFIER and CLIENT_ID with the settings you configured in the setup step. You can also find them in the Application's and API's "Configure" tab in your dashboard.

// This file is often named index.jsx or _app.jsx
import { FirstlineContext } from "@first-line/firstline-react";

const App = () => {
  return (
    <FirstlineContext
      audience="API_IDENTIFIER"
      domain="DOMAIN"
      client_id="CLIENT_ID"
      redirect_uri={window.location.origin}
    >
    ...  {/* your existing components */}
    </FirstlineContext>
  );
};

4. Add login & logout to your application

Implement the following component in your frontend and you have a fully functional login/logout.

import { useFirstline } from "@first-line/firstline-react";

const MyComponent = () => {
  const { user, isAuthenticated, loginWithRedirect, logout } = useFirstline();
  
  return (
    <>
      {isAuthenticated ? (
        <div>
          <p>{user.email}</p>
          <button onClick={() => logout()}>Logout</button>
        </div>
      ) : (
        <button onClick={() => loginWithRedirect()}>Login</button>
      )}
    </>
  );
};

You can call useFirstline() from anywhere in your application to

• log in
• log out
• check if the user is signed in
• retrieve the logged in user

5. Make a secured backend call

Here is sample code on how to make an API request to a secured endpoint.

import { useState } from "react";
import { useFirstline } from "@first-line/firstline-react";

const Posts = () => {
  const { getAccessToken } = useFirstline();
  const [posts, setPosts] = useState([]);

  const loadPosts = async () => {
    const response = await fetch("http://localhost:8080/posts", {
      headers: {
        Authorization: `Bearer ${getAccessToken()}`,
      },
    });
    const data = await response.json();
    setPosts(data);
  };

  return (
    <div>
      <button onClick={loadPosts}>Load Posts</button>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.text}</li>
        ))}
      </ul>
    </div>
  );
};

In this example, we assume that the API endpoint http://localhost:8080/posts exists.

Important: The user must be logged in when calling getAccessToken(). Therefore, use isAuthenticated.