Skip to content

README.md

Latest commit

 

History

History
63 lines (40 loc) · 3.79 KB

README.md

File metadata and controls

63 lines (40 loc) · 3.79 KB

Express & Custom Login Page Example

This example shows you how to use the OIDC Middleware Library to login a user. The login is achieved with the Okta Sign In Widget, which gives you more control to customize the login experience within your app. After the user authenticates, they are redirected back to the application and a local cookie session is created using express-session.

Prerequisites

Before running this sample, you will need the following:

  • An Okta Developer Account, you can sign up for one at https://developer.okta.com/signup/.
  • An Okta Application, configured for Web mode. This is done from the Okta Developer Console and you can find instructions here. When following the wizard, use the default properties. They are designed to work with our sample applications.
  • Your Okta Application entry needs a login redirect URI. Go to "Login redirect URIs" under "General Settings" for your application, click "Edit" and add http://localhost:8080/authorization-code/callback.
  • Your Okta Application entry needs the logout callback. "Logout redirect URIs" under "General" for the application should list http://localhost:8080. If it is not present, click "Edit" and add it.

Running This Example

To run this application, you first need to clone this repo and then enter into this directory:

git clone https://github.com/okta/samples-nodejs-express-4.git
cd samples-nodejs-express-4/

Then install dependencies:

npm install

Now you need to gather the following information from the Okta Developer Console:

  • Client ID and Client Secret - This can be found on the "General" tab of an application, you want to get this for the Web application that you created earlier.

  • Issuer - This is the URL of the authorization server that will perform authentication. All Developer Accounts have a "default" authorization server. The issuer is a combination of your Org URL (found in the upper right of the console home page) and /oauth2/default. For example, https://dev-1234.okta.com/oauth2/default.

These values must exist as environment variables. They can be exported in the shell, or saved in a file named testenv, at the root of this repository. (This is the parent directory, relative to this README) See dotenv for more details on this file format.

ISSUER=https://yourOktaDomain.com/oauth2/default
CLIENT_ID=123xxxxx123
CLIENT_SECRET=1234XXX

With variables set, start the app server:

npm run custom-login-server

Now navigate to http://localhost:8080 in your browser.

If you see a home page that prompts you to login, then things are working! Clicking the Log in button will render a custom login page, served by the Express application, that uses the Okta Sign-In Widget to perform authentication.

You can login with the same account that you created when signing up for your Developer Org, or you can use a known username and password from your Okta Directory.

Note: If you are currently using your Developer Console, you already have a Single Sign-On (SSO) session for your Org. You will be automatically logged into your application as the same user that is using the Developer Console. You may want to use an incognito tab to test the flow from a blank slate.