Add tweaks to README.md and add error handling to app.py

Author: Joël Franušić

python-flask-sso-example/README.md

@@ -44,10 +44,10 @@ An example Flask application demonstrating how to use the [WorkOS Python SDK](ht
 
 5. Obtain and make note of the following values. In the next step, these will be set as environment variables.
 
-   - Your [WorkOS API key](https://dashboard.workos.com/api-keys)
-   - Your [SSO-specific, WorkOS Client ID](https://dashboard.workos.com/configuration)
+   - Your [WorkOS API key and Client ID](https://dashboard.workos.com/get-started)
 
-6. Ensure you're in the root directory for the example app, `python-flask-sso-example/`. Create a `.env` file to securely store the environment variables. Open this file with the Nano text editor. (This file is listed in this repo's `.gitignore` file, so your sensitive information will not be checked into version control.)
+6. Ensure you're in the root directory for the example app, `python-flask-sso-example/`.
+7. Create a `.env` file to securely store the environment variables. Open this file with the Nano text editor. (This file is listed in this repo's `.gitignore` file, so your sensitive information will not be checked into version control.)
 
    ```bash
    (env) $ touch .env
@@ -57,11 +57,17 @@ An example Flask application demonstrating how to use the [WorkOS Python SDK](ht
 7. Once the Nano text editor opens, you can directly edit the `.env` file by listing the environment variables:
 
    ```bash
-   WORKOS_API_KEY=<value found in step 6>
-   WORKOS_CLIENT_ID=<value found in step 6>
+   WORKOS_API_KEY=<value found in step 5>
+   WORKOS_CLIENT_ID=<value found in step 5>
    APP_SECRET_KEY=<any string value you\'d like>
    ```
 
+   If you are unsure what to use for the `APP_SECRET_KEY`, you can generate a random UUID using Python.
+
+   ```bash
+    (env) $ python3 -c "import uuid; print(uuid.uuid4())"
+    ```
+
    To exit the Nano text editor, type `CTRL + x`. When prompted to "Save modified buffer", type `Y`, then press the `Enter` or `Return` key.
 
 8. Source the environment variables so they are accessible to the operating system.
@@ -73,22 +79,22 @@ An example Flask application demonstrating how to use the [WorkOS Python SDK](ht
    You can ensure the environment variables were set correctly by running the following commands. The output should match the corresponding values.
 
    ```bash
-   (env) $ echo $WORKOS_API_KEY
-   (env) $ echo $WORKOS_CLIENT_ID
+   (env) $ echo $WORKOS_API_KEY | grep sk_test_
+   (env) $ echo $WORKOS_CLIENT_ID | grep client_
    ```
 
-9. In `python-flask-sso-example/app.py` change the `CUSTOMER_ORGANIZATION_ID` string value to the organization you will be testing the login for. This can be found in your WorkOS Dashboard.
+9. In `python-flask-sso-example/app.py` change the `CUSTOMER_ORGANIZATION_ID` string value to the organization you will be testing the login for. This can be found in your WorkOS Dashboard by clicking on the "Organizations" link on the left side of the dashboard.
 
 10. The final setup step is to start the server.
 
 ```bash
-(env) $ flask run
+(env) $ flask run -h localhost
 ```
 
 If you are using macOS Monterey, port 5000 is not available and you'll need to start the app on a different port with this slightly different command.
 
 ```bash
-(env) $ flask run -p 5001
+(env) $ flask run -h localhost -p 5001
 ```
 
 You'll know the server is running when you see no errors in the CLI, and output similar to the following is displayed:
@@ -102,15 +108,15 @@ Use a production WSGI server instead.
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
 ```
 
-Navigate to `localhost:5000`, or `localhost:5001` depending on which port you launched the server, in your web browser. You should see a "Login" button. If you click this link, you'll be redirected to an HTTP `404` page because we haven't set up SSO yet!
+Navigate to `localhost:5000`, or `localhost:5001` depending on which port you launched the server, in your web browser. You should see a "Login" button. If you click this link, you'll be redirected to an HTTP `404` page saying "Invalid redirect URI" because we haven't set up SSO yet!
 
 You can stop the local Flask server for now by entering `CTRL + c` on the command line.
 
 ## SSO Setup with WorkOS
 
 Follow the [SSO authentication flow instructions](https://workos.com/docs/sso/guide/introduction) to set up an SSO connection.
 
-When you get to the step where you provide the `REDIRECT_URI` value, use http://localhost:5000/auth/callback.
+When you get to the step with the "Add Redirect URI" value, use `http://localhost:5000/auth/callback`
 
 If you get stuck, please reach out to us at [email protected] so we can help.
 

python-flask-sso-example/app.py

@@ -1,6 +1,6 @@
 import json
 import os
-from flask import Flask, session, redirect, render_template, request, url_for
+from flask import Flask, flash, redirect, render_template, request, session, url_for
 import workos
 
 
@@ -37,7 +37,15 @@ def login():
             raw_profile=session["raw_profile"],
         )
     except KeyError:
-        return render_template("login.html")
+        if "error" in session:
+            return render_template(
+                "login.html",
+                error=session.pop("error"),
+                error_description=session.pop("error_description"),
+                error_uri=session.pop("error_uri"),
+            )
+        else:
+            return render_template("login.html")
 
 
 @app.route("/auth", methods=["POST"])
@@ -69,6 +77,10 @@ def auth():
 @app.route("/auth/callback")
 def auth_callback():
 
+    if "error" in request.args:
+        session["error_description"] = request.args.get("error_description")
+        session["error_uri"] = request.args.get("error_uri")
+        session["error"] = request.args.get("error")
     code = request.args.get("code")
     # Why do I always get an error that the target does not belong to the target organization?
     if code is None:

python-flask-sso-example/static/login.css

@@ -371,9 +371,12 @@ h1 {
 }
 
 .error_message {
-  color: #6363f1;
-  margin-top: 0px;
-  font-size: 12px;
+  background-color: #f8d7da;
+  border: 1px solid #e74c3c;
+  padding: 10px;
+  margin-bottom: 20px;
+  border-radius: 5px;
+  color: #c0291b;
 }
 
 #noborder {

python-flask-sso-example/templates/login.html

@@ -24,15 +24,27 @@
             <a href="https://workos.com/" target="_blank"><button class='button button-outline'>WorkOS</button></a>
         </div>
     </div>
+    {% if error_description %}
+    <div class="flex flex_column error_message">
+        <span>
+            Error: <a href="{{ error_uri }}">
+            {{ error }}
+            </a>
+        </span>
+        <span>
+            {{ error_description }}
+        </span>
+    </div>
+    {% endif %}
     <div class="flex flex_column height-80vh">
-        <div class='flex height-40vh'>                                  
+        <div class='flex height-40vh'>
             <div class="card height-315 width-335">
                 <form method="POST" action="{{ url_for('auth') }}" class="mb-0">
                     <div class='flex_column'>
                         <div>
                             <span>Log in with SSO</span>
                         </div>
-                        <hr style="width:100%; margin-top: 15px; margin-bottom: 20px;">                    
+                        <hr style="width:100%; margin-top: 15px; margin-bottom: 20px;">
                         <button id="Google" name="login_method" value="GoogleOAuth" class="card login_button google_button">
                             <span>Google OAuth</span>
                         </button>