Sample Firstline React

This is a sample React app with fully fledged authentication using Firstline.

Helpful resources

• Quick setup - our guide for quickly adding login, logout and user information to a React app using Firstline.
• NodeJS sample backend - the backend counterpart to this sample app.
• Firstline docs - explore our docs site and learn more about Firstline.

Getting started

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.

Installation

1. Clone this repository
2. Install the required dependencies via the appropriate command below.

Using npm:

npm install

Using yarn:

yarn install

Configuration

Open the .env file and enter the correct values. Replace DOMAIN, CLIENT_ID, and API_IDENTIFIER (audience) with the settings you configured in the Setup step. You can also find them on the Configure tab of the application and API in your dashboard.

Replace API_URL with the URL where your backend runs.

Example:

# .env
PORT=3000
REACT_APP_FIRSTLINE_DOMAIN="aohccczmw8q59zxpyptp.dev.firstline.sh"
REACT_APP_FIRSTLINE_CLIENT_ID="L.Ga3midssPHeXDoOQ3Kjj62qDXnNjfC"
REACT_APP_FIRSTLINE_AUDIENCE="http://localhost:8080"
REACT_APP_API_URL="http://localhost:8080"

Setup the backend sample

To make full use of the sample app, you can now set up the appropriate backend. For this you can simply use our NodeJS sample.

Try it out

Run the following command and open http://localhost:3000 in your browser.

npm start