This library enables you to add authentication to your React app.
- 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.
- Follow the Quick setup to configure a Firstline Application.
- Add a Firstline API as shown in Secure API.
Important: Don't forget to configure the Application URIs.
Using npm:
npm install @first-line/firstline-reactUsing yarn:
yarn add @first-line/firstline-reactHint: You can also try out our React sample app.
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>
);
};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
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.