Step 2 - Login Button

To better understand how FusionAuth works, let's take a look at an example app. This app uses Node, Express, Typescript, and FusionAuth to secure a section of the app. This example may seem simple, but it demonstrates how to leverage FusionAuth for things like login and access controls.

You need Node 22.x or newer to run this example.

First, download the app from GitHub:

git clone git@github.com:FusionAuth/fusionauth-example-get-started.git

Then, navigate into the app directory:
```
cd fusionauth-example-get-started
```
Install the app dependencies:
```
npm install
```
Run the app:
```
npm run dev
```
Open http://localhost:8080 and you'll see the example app. Click the login button, and the app will redirect you to FusionAuth's login page.
Finally, log in:
- If you are still logged in as the FusionAuth admin user, your browser will redirect you back to the example app. This is an example of FusionAuth's single sign-on (SSO) capabilities.
- If you aren't currently logged into FusionAuth, you will see a login page. You can use these credentials to log in as a non-admin:
  - Username: richard@example.com
  - Password: password
You can find your current username at the top right of the app.

How it works#

Let's take a quick look at how this app interacts with FusionAuth. First, open templates/home.html: the homepage. You should see the following code:

<div id="logo-header">
  <img src="https://fusionauth.io/cdn/samplethemes/changebank/changebank.svg" />
  <a class="button-lg" href="/login">Login</a>
</div>

This renders a login button that, when clicked, navigates to /login.

Open src/index.mts, which contains the Node and Express backend code. You should see the following route:

app.get('/login', async (req, res) => {
  if (await sdk.userLoggedIn(req, res)) {
    res.redirect(302, '/account');
    return;
  }

  sdk.sendToLoginPage(res);
});

When someone opens this route in a browser, the app checks their login status:

If the user is logged in, the app redirects them to the /account page.
If the user isn't logged in, the app redirects them to the FusionAuth login page.

This example app organizes most of the OAuth, JWT, and cookie logic into a separate file named sdk.ts. Take a look at that file to get a better understanding of how this all comes together.

sendToLoginPage() redirects the user to the FusionAuth login page, following the OAuth specification. We won't go into detail about OAuth here, but the key takeaway is that this app integrates with FusionAuth using the OAuth standard.

Next steps#

Step 1: Install

Step 3: Protected Pages

Results