Quick setup

In this quickstart you will set up Firstline and secure your frontend.

1. Open the Firstline dashboard

Please open the Dashboard in your browser.

2. Create an application

Click "New Application +" on the right hand side ...

... then specify the details of the service you want to secure.

Specify the name of the service you want to secure and click "Create".

3. Configure Application URIs

Switch to the "Configure" tab in your application and scroll down.

Here you have to specify the following three URLs:

• Allowed Redirect URIs: URLs to which Firstline is allowed to redirect users after they authenticate.
• Allowed Web Origins: URLs on which users are allowed to log in.
• Allowed Logout URIs: URLs to which users can be redirected after they logged out.

Example:

In the following example, we assume that the service is running on http://localhost:3000.

A sign-in button on http://localhost:3000 allows users to log in (Allowed Web Origins). After a successful login, users are redirected from Firstline back to http://localhost:3000 (Allowed Redirect URIs). After users log out, they should be redirected to http://localhost:3000/logout (Allowed Logout URIs).

4. Create an API

Go back to the Dashboard and click "New API +" on the bottom right.

Choose a name for the backend API that you want to save. Also specify the URL of your backend in the "Identifier" field.

5. Install the Firstline package

Open your console, navigate to your React project and execute the appropriate command.

npm install @first-line/firstline-react

6. Wrap your application with the Firstline context

1. Wrap your React app with Firstline context.

// 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>
  );
};

2. Replace the API_IDENTIFIER with the identifier you configured for your newly created API in step 4. (e.g. http://localhost:8080)
3. Replace the strings DOMAIN and CLIENT_ID. You can find their values in the "Configure" tab of your created application. (e.g. s5mjq2jso2hpz1wttlvq.firstline.sh and zrHdJz8bpfqitU8v4Rcfs1hzoD0_z10q)

7. Add login & logout to your application

Implement the following code 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

8. Call a secured API endpoint (backend)

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. Please adjust the URL and render logic to the API endpoints of your service.

Use "getAccessToken()" to get an authentication token that you include in your backend request. You can then use the token in the backend to verify that the user is authenticated.

How to secure your API (backend)? Learn more.

What's next?

Awesome, you have now successfully added authentication to your frontend. Here are a few links that might be handy as you venture further:

• Secure your API (backend)
• Customise your authentication