boburmirzo/apisix-authgear-oidc-full-stack-auth

A full-stack authentication app with APISIX, Authgear and OIDC

How to build a full-stack authentication app

This repo demonstrates how to develop a full-stack authentication flow for a web application using Apache APISIX, Authgear and OIDC (OpenID Connect).

Full-stack Authentication App with APISIX, Authgear and OIDC

For the demo, we used Docker to install and run 3 components (backend, API Gateway and frontend) with a single command. We employed ExpressJS for the frontend web app, hosting our single page app at localhost:3000. The APISIX Gateway can be accessed at localhost:9080, while our backend API (it can be any API you build using Python, Java, NodeJS and etc.) is set up on localhost:9081.

How to run the project

Prerequisites

Before you begin, you'll need the following:

• A free Authgear account. Sign up if you don't have one already.
• Configure an application in Authgear. If you don't have any applications that use Authgear, you can create a new Authgear OIDC Client application by following this guide.
• Docker is used to install all services.

Start by cloning the project into your local machine:

git clone https://github.com/Boburmirzo/apisix-authgear-oidc-full-stack-auth.git

Make the project directory your current working directory:

cd apisix-authgear-oidc-full-stack-auth

In the root directory of your project where Docker compose yaml file, create a file .env with the following environment variables:

CLIENT_ID={AUTHGEAR_APP_CLIENT_ID}
CLIENT_SECRET={AUTHGEAR_APP_CLIENT_SECRET}
ISSUER={AUTHGEAR_ISSUER}
REDIRECT_URI=http://localhost:3000

Replace values in the brackets with your Authgear app settings values from Configure Authgear such as Issuer, ClientId, ClientSecret

After you added the environment file, run the docker compose up command from the root directory.

Testing authentication flow

After the installation went successful, browse to localhost:3000. You should be redirected to the Authgear login screen. If you are first time authenticating, you will be asked to sign up first.

apisix-authgear-oidc-full-stack-auth's Issues

help request: An error occoured! Login could not complete. Error data: AxiosError: Request failed with status code 404

Hello,

I followed the instrustions from the readme and from this link https://api7.ai/blog/build-full-stack-authetication-app for the configuration.

• Go to http://localhost:3000 from my browser
• I get the login form from Authgear
• I put my email address
• I put my code (received by mail from Authgear)
• I get error An error occoured! Login could not complete. Error data: AxiosError: Request failed with status code 404.

I can see the foolowing error bu using this command 'docker compose logs apisix'

apisix-authgear-oidc-full-stack-auth-apisix-1 | 2024/03/16 20:41:56 [error] 51#51: *3 [lua] config_yaml.lua:211: failed to check item data of [routes] err:additional properties forbidden, found method ,val: {"status":1,"uri":"/protected","upstream_id":1,"name":"protected_route","priority":0,"method":"GET","plugins":{"openid-connect":
.....

When I directly test the route http://localhost:9080/protected, I received a http status 404.

Would you please have an idea of this issue ?

Laurent