Update UI/UX for Flask SSO app (#38)

* Update UI/UX for flask SSO app

* Remove print statements

* Update readme

---------

Co-authored-by: Adam Wolfman <[email protected]>

Author: awolfden

python-flask-sso-example/README.md

@@ -1,13 +1,15 @@
 # python-flask-sso-example
+
 An example Flask application demonstrating how to use the [WorkOS Python SDK](https://github.com/workos/workos-python) to authenticate users via SSO.
 
 ## Prerequisites
-- Python 3.6+
 
+- Python 3.6+
 
 ## Flask Project Setup
 
 1. Clone the main git repo for these Python example apps using your preferred secure method (HTTPS or SSH).
+
    ```bash
    # HTTPS
    $ git clone https://github.com/workos/python-flask-example-applications.git
@@ -21,33 +23,39 @@ An example Flask application demonstrating how to use the [WorkOS Python SDK](ht
    ```
 
 2. Navigate to the sso app within the cloned repo.
+
    ```bash
    $ cd python-flask-example-applications/python-flask-sso-example
    ```
 
 3. Create and source a Python virtual environment. You should then see `(env)` at the beginning of your command-line prompt.
+
    ```bash
    $ python3 -m venv env
    $ source env/bin/activate
    (env) $
    ```
 
 4. Install the cloned app's dependencies.
+
    ```bash
    (env) $ pip install -r requirements.txt
    ```
 
 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)
 
 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.)
+
    ```bash
    (env) $ touch .env
    (env) $ nano .env
    ```
 
 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>
@@ -57,43 +65,46 @@ An example Flask application demonstrating how to use the [WorkOS Python SDK](ht
    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.
+
    ```bash
    (env) $ source .env
    ```
 
    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
    ```
 
-9. In `python-flask-sso-example/app.py` change the `CUSTOMER_CONNECTION_ID` string value to the connection 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.
 
 10. The final setup step is to start the server.
-   ```bash
-   (env) $ flask run
-   ```
 
-   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
-   ```
+```bash
+(env) $ flask run
+```
 
-   You'll know the server is running when you see no errors in the CLI, and output similar to the following is displayed:
+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
-   * Tip: There are .env or .flaskenv files present. Do "pip install python-dotenv" to use them.
-   * Environment: production
-   WARNING: This is a development server. Do not use it in a production deployment.
-   Use a production WSGI server instead.
-   * Debug mode: off
-   * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
-   ```
+```bash
+(env) $ flask run -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:
 
-   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!
+```bash
+* Tip: There are .env or .flaskenv files present. Do "pip install python-dotenv" to use them.
+* Environment: production
+WARNING: This is a development server. Do not use it in a production deployment.
+Use a production WSGI server instead.
+* Debug mode: off
+* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
+```
 
-   You can stop the local Flask server for now by entering `CTRL + c` on the command line.
+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!
 
+You can stop the local Flask server for now by entering `CTRL + c` on the command line.
 
 ## SSO Setup with WorkOS
 
@@ -107,15 +118,15 @@ If you get stuck, please reach out to us at [email protected] so we can help.
 
 11. Naviagte to the `python-flask-sso-example` directory. Source the virtual environment we created earlier, if it isn't still activated from the steps above. Start the Flask server locally.
 
-   ```bash
-   $ cd ~/Desktop/python-flask-sso-example/
-   $ source env/bin/activate
-   (env) $ flask run
-   ```
+```bash
+$ cd ~/Desktop/python-flask-sso-example/
+$ source env/bin/activate
+(env) $ flask run
+```
 
-   Once running, navigate to `localhost:5000`, or `localhost:5001` depending on which port you launched the server, to test out the SSO workflow.
+Once running, navigate to `localhost:5000`, or `localhost:5001` depending on which port you launched the server, to test out the SSO workflow.
 
-   Hooray!
+Hooray!
 
 ## Need help?
 

python-flask-sso-example/app.py

@@ -16,9 +16,9 @@
 workos.project_id = os.getenv("WORKOS_CLIENT_ID")
 workos.base_api_url = "http://localhost:7000/" if DEBUG else workos.base_api_url
 
-# Enter Connection ID here
+# Enter Organization ID here
 
-CUSTOMER_CONNECTION_ID = ""
+CUSTOMER_ORGANIZATION_ID = ""
 
 
 def to_pretty_json(value):
@@ -40,14 +40,19 @@ def login():
         return render_template("login.html")
 
 
-@app.route("/auth")
+@app.route("/auth", methods=["POST"])
 def auth():
 
-    authorization_url = workos.client.sso.get_authorization_url(
-        redirect_uri=url_for("auth_callback", _external=True),
-        state={},
-        connection=CUSTOMER_CONNECTION_ID,
-    )
+    login_type = request.form.get("login_method")
+
+    params = {"redirect_uri": url_for("auth_callback", _external=True), "state": {}}
+
+    if login_type == "saml":        
+        params["organization"] = CUSTOMER_ORGANIZATION_ID
+    else:
+        params["provider"] = login_type
+
+    authorization_url = workos.client.sso.get_authorization_url(**params)
 
     return redirect(authorization_url)