Everything you need to effectively run and manage your APIs is right here.
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:
http://localhost:3000/callbackhttp://localhost:3000/logoutOthers
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:
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:
baseURL - The URL where the application is servedsecret - A long, random string, which you must not share. It can be
generated with the terminal command $ openssl rand -hex 32 .issuerBaseURL - IAGL Identity Product domainclientID - The URL where the application is servedBelow you can find an example configuration used on localhost development:
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:
Callback url
Is a URL in your application that you would like the Identity Product to
redirect users to after they have authenticated. If not set, users will not be
returned to your application after they log in.
Example: for local development you can use http://localhost:3000/callback
Logout url Is a URL in your application that you would like the Identity Product to redirect users to after they have logged out, by using returnTo query parameter. If not set, users will not be able to log out from your application and will receive an error.
Example: for local development you can use http://localhost:3000/logout
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:
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:
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'
AUTH0_SECRET A long secret value used to encrypt the session cookie.AUTH0_BASE_URLAUTH0_ISSUER_BASE_URLAUTH0_CLIENT_IDAUTH0_CLIENT_SECRETCreate 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.
// pages/api/auth/[...auth0].js
import { handleAuth } from '@auth0/nextjs-auth0';
export default handleAuth();
Under the hood, handleAuth() creates the following routes:
/api/auth/login The route used to perform login with Identity Product./api/auth/logout The route used to log the user out./api/auth/callback The route that will redirect the user to after a
successful login./api/auth/meOn 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:
// 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.
<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:
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:
status code 400 ),
even though the user is already authenticated.Scenario 2:
status code 400 ).status code 400 ).