React

Setup Application in Authgear
Signup for an account in https://portal.authgearapps.com/ and create a Project.
Continue to Portal to create a new Application in the Project
After that, we will need to create an Application in the Project Portal.
Create an application in the Portal
1.Go to Applications in your project portal.
2.Click Add Application in the top right corner.
3.Input the name of your application. This is for reference only. 
4.Decide a path in your website that users will be redirected to after they have authenticated with Authgear. Add the URI to Redirect URIs. e.g.http://localhost:3000/auth-redirect  for this tutorial.
5.Select the Issue JWT as access token option. We will use Token-based authentication for this tutorial. 
6.Click "Save" and keep the Client ID. You can also obtain it from the Applications list later.
Add your website to allowed origins
1.Go to Applications > Allowed Origins.
2.Add your website origin to the allowed origins. Set tolocalhost:3000 for this tutorial.
3.Click "Save".
Create a sample application
If you don't already have an existing React application, you can create one using Create React App. Skip this part if you are integrating Authgear to your existing application.
1
# Create the application using Create React App
2
npx create-react-app my-app
3
# Move into the project directory
4
cd my-app
5
# Add the react router as we will be using it later
6
npm install --save react-router-dom
Copied!
Install the Authgear Web SDK
Run the following command within your React project directory to install the Authgear Web SDK
1
npm install --save --save-exact @authgear/web
Copied!
Create an Authentication Provider
Add Login to Your Application
Add Logout to Your Application
Protecting Routes
Calling an API
To access restricted resources on your application server, the HTTP requests should include the access token in their Authorization headers. The Web SDK provides a fetch function which automatically handle this, or you can get the token with authgear.accessToken.
Option 1: Using fetch function provided by Authgear SDK
Authgear SDK provides the fetch function for you to call your application server. This fetch function will include the Authorization header in your application request, and handle refresh access token automatically. The authgear.fetch implements fetch.
1
authgear
2
    .fetch("YOUR_SERVER_URL")
3
    .then(response => response.json())
4
    .then(data => console.log(data));
Copied!
Option 2: Add the access token to the HTTP request header
You can get the access token through authgear.accessToken. Call refreshAccessTokenIfNeeded every time before using the access token, the function will check and make the network call only if the access token has expired. Include the access token into the Authorization header of the application request.
1
authgear
2
    .refreshAccessTokenIfNeeded()
3
    .then(() => {
4
        // access token is ready to use
5
        // accessToken can be string or undefined
6
        // it will be empty if user is not logged in or session is invalid
7
        const accessToken = authgear.accessToken;
8
​
9
        // include Authorization header in your application request
10
        const headers = {
11
            Authorization: `Bearer ${accessToken}`
12
        };
13
    });
Copied!
This page is working in progress, please see Get Started: Web SDK for general guides of using the Authgear Web SDK

tutorials - Previous

Single-Page App

Next - tutorials

Local Development Setup

Last modified 5mo ago

Copy link

Contents

Setup Application in Authgear

Create an application in the Portal

Add your website to allowed origins

Create a sample application

Install the Authgear Web SDK

Create an Authentication Provider

Add Login to Your Application

Add Logout to Your Application

Protecting Routes

Calling an API