All you need to run your APIs
All you need to run your APIs
A Regular Web Application is a traditional web application that runs on the server (server-side application).
Applications with backend may track sessions with a server-side application session, with a server-side cookie. This cookie may track its expiration by depending on the token response from IdP. For example, if the cookie expires the backend has a few options to get the token response from the IdP and then slide the application session:
The guides below demonstrates how to integrate your Regular Web Application with the Identity Product, on our development, testing, staging and production environments.
Before we are able to create your application and share the needed details you need to provide:
Others
After sharing the needed details (above) we will provide, per environment:
Your application should install our preferred package, express-openid-connect. Install the Express OIDC SDK by executing the following commands on your terminal:
1
2
cd <your-project-directory>
npm install express-openid-connect'The Express OpenID Connect library provides the auth router in order to attach authentication routes to your application. You will need to configure the router with the following configuration keys:
Below you can find an example configuration used on localhost development:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const { auth } = require('express-openid-connect');
const config = {
authRequired: false,
auth0Logout: true,
authorizationParams: {
response_type: 'code'
},
secret: 'a long, randomly-generated string',
baseURL: 'http://localhost:3000',
clientID: 'lHE0Lq3400FXQv6ebMVxetKC9w1xPwBo',
issuerBaseURL: 'https://identity.iagl.digital'
};
// auth router attaches /login, /logout, and /callback routes to the baseURL
app.use(auth(config));
// req.isAuthenticated is provided from the auth router
app.get('/', (req, res) => {
res.send(req.oidc.isAuthenticated() ? 'Logged in' : 'Logged out');
});Now your application should be fully integrated with Identity Product. Default routes for logging in and out are provided. For login visit /login , and for logout visit /logout .
Before we are able to create your application and share the needed details you need to provide:
Others
After sharing the needed details (above) we will provide, per environment:
Your application should install our preferred package, auth0/nextjs-auth0. Install the Next.js SDK by executing the following commands on your terminal:
1
2
cd <your-project-directory>
npm install @auth0/nextjs-auth0'The SDK exposes methods and variables that help you integrate your Next.js application using API Routes on the backend and React Context with React Hooks on the frontend.
In the root directory of your project add a .env.local with the following content:
1
2
3
4
5
6
AUTH0_SECRET='use [openssl rand -hex 32] to generate a 32 bytes value'
AUTH0_BASE_URL='http://localhost:3000'
AUTH0_ISSUER_BASE_URL='https://identity.iagl.digital'
AUTH0_CLIENT_ID='lHE0Lq3400FXQv6ebMVxetKC9w1xPwBo'
AUTH0_CLIENT_SECRET='3zENCPDSg9IWIdMVt93QP-TAwDBtvuZKknO_-bd3Z2m55yHJ0q5eA6FmsdGNFs5v'
Create an auth directory under the pages/api directory. Then, create a [...auth0].js file under the newly created auth directory. The path to your dynamic API route file should then be pages/api/auth/[...auth0].js.
Import in that file the handleAuth method from the SDK, and export the result of calling it.
1
2
3
// pages/api/auth/[...auth0].js
import { handleAuth } from '@auth0/nextjs-auth0';
export default handleAuth();Under the hood, handleAuth() creates the following routes:
On the frontend side, the SDK uses React Context to manage the authentication state of your users. To make that state available to all your pages, you need to override the App component and wrap its inner component with a UserProvider. Create the file pages/ _ app.js as follows:s
1
2
3
4
5
6
7
8
9
10
11
// pages/_app.js
import React from 'react';
import { UserProvider } from '@auth0/nextjs-auth0';
export default function App({ Component, pageProps }) {
return (
<UserProvider>
<Component {...pageProps} />
</UserProvider>
);
}The authentication state exposed by UserProvider can be accessed in any component using the useUser() hook.
Now that you have added the dynamic route and UserProvider , run your application to verify that your application is not throwing any errors.
A user can now log in to your application by visiting the /api/auth/login route provided by the SDK. Add a link to your login route using an anchor tag.
1
<a href="/api/auth/login">Login</a>The Next.js SDK helps you retrieve the profile information associated with the logged-in user, such as their name or profile picture, to personalize the user interface. The profile information is available through the user property exposed by the useUser() hook. Take this Profile component as an example of how to use it:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React from 'react';
import { useUser } from '@auth0/nextjs-auth0';
export default function Profile() {
const { user, error, isLoading } = useUser();
if (isLoading) return <div>Loading...</div>;
if (error) return <div>{error.message}</div>;
return (
user && (
<div>
<img src={user.picture} alt={user.name} />
<h2>{user.name}</h2>
<p>{user.email}</p>
</div>
)
);
}
The user property contains sensitive information and artifacts related to the user's identity. As such, its availability depends on the user's authentication status. To prevent any render errors:
Now your application should be fully integrated with Identity Product.
If a user has multiple browser tabs opened with your application
If that same user starts the authentication flow ( /login route ) on more than one tab, things will not work as expected. Here are the scenarios.
Scenario 1:
Scenario 2: