Sign users in to your web app using the redirect model

Add a user sign-in flow to a server-side web app with Okta's redirect model (opens new window).

---

Learning outcomes

• Implement a simple redirect to an Okta-hosted sign-in page.
• Configure a server-side web app to use Okta.
• Test that users can sign in and sign out.
• Define which parts of an app require authentication and which don't.

What you need

• An Okta Developer Edition org (opens new window)

• A recent version of Python (opens new window) and pip (opens new window) installed

Sample code

Quickstart sample app (opens new window)

---

Overview

The easiest and most secure way to add a user sign-in flow to your server-side web app is to use an Okta-hosted Sign-In Widget. When a user attempts to sign in, the app redirects them to the widget hosted on an Okta web page. After they've signed in successfully, Okta redirects them back to the app. This is known as the redirect authentication deployment model.

Note: To use the redirect model in a single-page application (SPA), see Sign users in to your SPA using the redirect model. To use the redirect model in a mobile app, see Sign users in to your mobile app using the redirect model.

In this quickstart, you:

1. Create an app integration in the Admin Console.
2. Create and configure a new web app to use Okta.
3. Test that a user can sign in and sign out.
4. Configure different levels of access for specific areas of the site.

Tip: You need your Okta org domain to follow this tutorial. It looks like dev-123456.okta.com. See Find your Okta domain. Where you see {yourOktaDomain} in this guide, replace it with your Okta domain.

Create an app integration in the Admin Console

An app integration represents your app in your Okta org. Use it to configure how your app connects with Okta services.

To create an app integration for your app:

1. Open the Admin Console for your org.

   1. Sign in to your Okta organization (opens new window) with your administrator account.
   2. Click Admin in the upper-right corner of the page.

2. Go to Applications > Applications to view the current app integrations.

3. Click Create App Integration.

4. Select OIDC - OpenID Connect as the Sign-in method.

5. Select Web Application as the Application type, then click Next.

   Note: You can break the sign-in or sign-out flows for your app if you choose the wrong app type.

6. Enter an App integration name. For example, My first web application.

7. Enter the callback URLs for the local development of your app.

   1. Enter

      http://localhost:5000/authorization-code/callback

      for Sign-in redirect URIs.
   2. Enter

      http://localhost:5000

      for Sign-out redirect URIs.

   Note: The values suggested here are those used in the sample app.

8. Select Allow everyone in your organization to access for Controlled access.

9. Click Save to create the app integration.

The configuration page for the new app integration appears. Keep this page open.

Note: For a complete guide to all the options not explained in this guide, see Create OIDC app integrations (opens new window).

Note your client ID and client secret

Make a note of two values that you use to configure your web app. Both are in the configuration pane for the app integration that you've created:

• Client ID: Found on the General tab in the Client Credentials section.
• Client Secret: Found on the General tab in the Client Credentials section.

Moving on, where you see {clientId} and {clientSecret} in this guide, replace them with your client ID and client secret.

Create and configure a new web app to use Okta

Now that you have created the app integration and noted the configuration settings, complete the following steps:

• Create a web app.
• Add the required packages to your app
• Configure your app to use Okta
• Add the pages and logic for a user to sign in and sign out

Create a web app

1. Create a project folder named okta-flask-quickstart and a subfolder called venv.

2. Activate the corresponding environment using the following commands:

   cd okta-flask-quickstart
   python -m venv venv
   . venv/scripts/activate  #linux or mac
   venv/scripts/activate.bat  #windows
   

   Use the appropriate activate command for your OS.

3. Create app.py in your project's root folder.

4. Add the following code to configure the app.

   import base64
   import hashlib
   import requests
   import secrets
   
   from flask import Flask, render_template, redirect, request, session, url_for
   from flask_cors import CORS
   from flask_login import (
       LoginManager,
       current_user,
       login_required,
       login_user,
       logout_user,
   )
   
   app = Flask(__name__)
   app.config.update({'SECRET_KEY': secrets.token_hex(64)})
   CORS(app)
   
   login_manager = LoginManager()
   login_manager.init_app(app)
   
   @app.route("/")
   def home():
       return render_template("signin.html")
   
   if __name__ == '__main__':
       app.run(host="localhost", port=5000, debug=True)
   

Add the required packages to your app

Add the requests, Flask, flask-cors, pyOpenSSL, and Flask-Login packages to your application with the following command:

pip install requests Flask flask-cors pyOpenSSL Flask-Login

Configure your app to use Okta

Earlier you noted the client ID and client secret values generated for your app integration. Add these and your Okta domain to your app's configuration.

1. Open app.py.

2. Add the following Okta config dictionary to the bottom of the file. Replace the placeholders with your own values.

   config = {
       "auth_uri": "https://${yourOktaDomain}/oauth2/default/v1/authorize",
       "client_id": "${clientId}",
       "client_secret": "${clientSecret}",
       "redirect_uri": "http://localhost:5000/authorization-code/callback",
       "issuer": "https://${yourOktaDomain}/oauth2/default",
       "token_uri": "https://${yourOktaDomain}/oauth2/default/v1/token",
       "userinfo_uri": "https://${yourOktaDomain}/oauth2/default/v1/userinfo"
   }
   

Add the pages and logic for a user to sign in and sign out

A user can start the sign-in process by:

• Clicking a sign-in link or button
• Trying to access a protected page, such as their profile page.

In both cases, the app redirects the browser to the Okta-hosted sign-in page. See Redirect to the sign-in page.

After the user signs in, Okta redirects the browser to the sign-in redirect URI that you entered earlier. Similarly, after a user signs out, Okta redirects the browser to the sign-out redirect URI. Both sign-in and sign-out redirect URIs are called callback routes. Users don't see callback routes, and they aren't the user's final destination. However, your app does need to implement them. See Define a callback route.

After the user signs in, Okta returns some of their profile information to your app. The default profile items (called claims) returned by Okta include the user's email address, name, and preferred username. These are sent in an ID token (opens new window) as part of the redirect to the sign-in redirect URL. See Get the user's information.

Redirect to the sign-in page

Create a link for the user to start the sign-in process and be redirected to Okta.

1. Create templates/signin.html.

2. Add the code for a sign-in and sign-out link. The sign-in button displays if the user is signed out and vice versa.

   {% if current_user.is_authenticated %}
   <form method="post" action="{{ url_for("signout") }}">
       <button id="signout-button" type="submit">Sign out</button>
   </form>
   {% else %}
   <form method="get" action="signin">
       <button id="signin-button" type="submit">Sign in</button>
   </form>
   {% endif %}
   

3. Open app.py.

4. Add a route handler for the sign-in functionality:

   @app.route("/signin")
   def signin():
       # store app state and code verifier in session
       session['app_state'] = secrets.token_urlsafe(64)
       session['code_verifier'] = secrets.token_urlsafe(64)
   
       # calculate code challenge
       hashed = hashlib.sha256(session['code_verifier'].encode('ascii')).digest()
       encoded = base64.urlsafe_b64encode(hashed)
       code_challenge = encoded.decode('ascii').strip('=')
   
       # get request params
       query_params = {'client_id': config["client_id"],
                       'redirect_uri': config["redirect_uri"],
                       'scope': "openid email profile",
                       'state': session['app_state'],
                       'code_challenge': code_challenge,
                       'code_challenge_method': 'S256',
                       'response_type': 'code',
                       'response_mode': 'query'}
   
       # build request_uri
       request_uri = "{base_url}?{query_params}".format(
           base_url=config["auth_uri"],
           query_params=requests.compat.urlencode(query_params)
       )
   
       return redirect(request_uri)
   

   Your sign-in handler generates the link URI and redirects the user to an Okta-hosted sign-in page. After they sign in, they're redirected back to your app.

5. Add a route handler for the sign-out functionality:

   @app.route("/signout", methods=["GET", "POST"])
   @login_required
   def signout():
       logout_user()
       return redirect(url_for("signin"))
   

Note: To customize the Okta sign-in form, see Style the Okta-hosted Sign-In Widget.

Define a callback route

When you created an app integration in the Admin Console, you set the sign-in redirect URL to

http://localhost:5000/authorization-code/callback

and the sign-out redirect URL to

http://localhost:5000

.

1. Open app.py.

2. Add a route handler for the sign-in callback handler URI to the end of the file:

   @app.route("/authorization-code/callback")
   def callback():
       headers = {'Content-Type': 'application/x-www-form-urlencoded'}
       code = request.args.get("code")
       app_state = request.args.get("state")
       if app_state != session['app_state']:
           return "The app state doesn't match"
       if not code:
               return "The code wasn't returned or isn't accessible", 403
       query_params = {'grant_type': 'authorization_code',
                       'code': code,
                       'redirect_uri': request.base_url,
                       'code_verifier': session['code_verifier'],
                       }
       query_params = requests.compat.urlencode(query_params)
       exchange = requests.post(
           config["token_uri"],
           headers=headers,
           data=query_params,
           auth=(config["client_id"], config["client_secret"]),
       ).json()
   
       # Get tokens and validate
       if not exchange.get("token_type"):
               return "Unsupported token type. Should be 'Bearer'.", 403
       access_token = exchange["access_token"]
       id_token = exchange["id_token"]
   
       # Authorization flow successful, get userinfo and sign in user
       userinfo_response = requests.get(config["userinfo_uri"],
                                       headers={'Authorization': f'Bearer {access_token}'}).json()
   
       unique_id = userinfo_response["sub"]
       user_email = userinfo_response["email"]
       user_name = userinfo_response["given_name"]
   
       user = User(
           id_=unique_id, name=user_name, email=user_email
       )
   
       if not User.get(unique_id):
               User.create(unique_id, user_name, user_email)
   
       login_user(user)
   
       return redirect(url_for("profile"))
   

Get the user's information

After a user signs in, the application has ID and access tokens from Okta in session storage. In this section, you create a simple profile page that uses an access token to query for and display a user's basic information.

1. Create templates/profile.html.

2. Add the code to display the user's name after the user signs in:

   <div>
       <h2>My Profile</h2>
       <p>Hello, <span>{{ user.name }}</span>.</p>
   </div>
   

3. Create user.py.

4. Add the code for a custom user model to store information about the signed-in user:

   from flask_login import UserMixin
   
   # Simulate user database
   USERS_DB = {}
   
   class User(UserMixin):
   
       """Custom User class."""
   
       def __init__(self, id_, name, email):
           self.id = id_
           self.name = name
           self.email = email
   
       def claims(self):
           """Use this method to render all assigned claims on profile page."""
           return {'name': self.name,
                   'email': self.email}.items()
   
       @staticmethod
       def get(user_id):
           return USERS_DB.get(user_id)
   
       @staticmethod
       def create(user_id, name, email):
           USERS_DB[user_id] = User(user_id, name, email)
   

5. Open app.py.

6. Add a route handler for /profile to the end of the file:

   @app.route("/profile")
   def profile():
       return render_template("profile.html", user=current_user)
   

7. Import the user model into the app.py file by adding the following code immediately above the route handler for /:

   from user import User
   
   @login_manager.user_loader
   def load_user(user_id):
       return User.get(user_id)
   

Note: The claims that you see may differ depending on the scopes requested by your app. See Configure your app to use Okta and Scopes (opens new window).

Test that a user can sign in and sign out

Your site now has enough content to sign a user in with Okta, prove they've signed in, and sign them out. Test it by starting your server and signing a user in.

1. Start your app with the Flask server:

   flask run
   

2. Open a browser and go to http://localhost:5000.

3. Click Sign In. The browser redirects you to Okta to sign in using the Sign-In Widget.

4. After you've signed in, click Profile. The profile page displays the user information returned by Okta.

5. Click Sign Out. The browser returns you to the home page.

Configure different levels of access for specific areas of the site

Your app can require authentication for the entire site or just for specific routes. Routes that don't require authentication are accessible without signing in, which is also called anonymous access.

Require authentication for everything

Some apps require user authentication for all routes, for example a company intranet.

You can use a middleware function or the @before_request decorator to protect every endpoint so that only authenticated users have access. For example:

@app.before_request
def check_valid_signin():
    endpoint_group = ('/profile', '/signout')
    if request.endpoint in endpoint_group and not is_authenticated():
            return render_template('signin.html', next=request.endpoint)

Require authentication for a specific route

Your website may have a protected portion that is only available to authenticated users.

You can use the @login_required decorator to achieve this. For example:

@app.route("/profile")
@login_required
def profile():
    return render_template("profile.html", user=current_user)

Allow anonymous access

Your website may enable anonymous access for some content but require a user to sign in for other content or to take some other action. For example, an ecommerce site might allow a user to browse anonymously and add items to a cart, but require a user to sign in for checkout and payment.

Any routes you don't explicitly protect have anonymous access:

1. Remove the @before_request decorator block from app.py to stop all pages and resources requiring authentication before they can be accessed.
2. Add the @login_required decorator just to the specific routes that require authentication, as seen in the previous section. Any other routes have anonymous access.

Next steps

• Protect your API endpoints.
• Custom domain and email address
• Style the Okta-hosted Sign-In Widget.
• Sign users in to your mobile app using the redirect model
• Multi-tenant solutions

Okta Developer Blog:

• Flask Tutorial: Simple User Registration and Login (opens new window)
• Build a Simple CRUD App with Flask and Python (opens new window)
• How to Write a Secure Python Serverless App on AWS Lambda (opens new window)
• Build a CRUD App with Python, Flask, and Angular (opens new window)
• Build a Simple CRUD App with Python, Flask, and React (opens new window)