Update Flask apps with caveat regarding port use with Mac OS Monterey and removed buggy user image logic from logged in page on SSO app (#5)

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

Author: awolfden

python-flask-admin-portal-example/README.md

@@ -70,7 +70,7 @@ An example Flask application demonstrating how to use the [WorkOS Python SDK](ht
    (env) $ echo $WORKOS_CLIENT_ID
    ```
 
-10. Update the Admin Portal Redirect Link in the "Configuration" page of your WorkOS Dashboard. The URL should be http://localhost:5000.
+10. Update the Admin Portal Redirect Link in the "Configuration" page of your WorkOS Dashboard. The URL should be http://localhost:5000. If you are using Mac OS Monterey, set this to localhost:5001. 
 
 After an Admin Portal user creates an SSO connection using the Admin Portal, they need to be redirected to a webpage within your application (usually this webpage confirms successful creation of the connection). To configure which webpage this is, enter the webpage’s URL in the Configuration section of your WorkOS dashboard under the “Admin Portal Redirect Link” header. For production usage this URL must begin with HTTPS, but for development purposes the URL can begin with HTTP.
 
@@ -81,6 +81,11 @@ After an Admin Portal user creates an SSO connection using the Admin Portal, the
    (env) $ flask run
    ```
 
+   If you are using Mac OS 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
+   ```
+
    You'll know the server is running when you see no errors in the CLI, and output similar to the following is displayed:
 
    ```bash
@@ -92,7 +97,7 @@ After an Admin Portal user creates an SSO connection using the Admin Portal, the
    * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
    ```
 
-   Navigate to `localhost:5000` in your web browser to view the homepage of the Admin Portal example app. Enter the name of the new Organization to be created and the names of all of the Organization's associated domains.
+   Navigate to `localhost:5000`, or `localhost:5001` depending on which port you launched the server, in your web browser to view the homepage of the Admin Portal example app. Enter the name of the new Organization to be created and the names of all of the Organization's associated domains.
 
    - The Organization must be a new Organization that doesn't yet exist in your WorkOS dashboard
    - The domains should be entered as space-separated values, e.g. "domain1.com domain2.com domain3.com"

python-flask-directory-sync-example/README.md

@@ -89,7 +89,12 @@ If you get stuck, please reach out to us at [email protected] so we can help.
    flask run
    ```
 
-11. Once the server is running, navigate to http://localhost:5000 to view the home page of the app where you can then select the view for users or groups. 
+   If you are using Mac OS 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
+   ```
+
+11. Once the server is running, navigate to `http://localhost:5000`, or `http://localhost:5001` depending on which port you launched the server,  to view the home page of the app where you can then select the view for users or groups. 
 
     - The `/users` URL corresponds to the WorkOS API's [List Directory Users endpoint](https://workos.com/docs/reference/directory-sync/user/list)
     - The `/groups` URL corresponds to the WorkOS API's [List Directory Groups endpoint](https://workos.com/docs/reference/directory-sync/group/list)

python-flask-magic-link-example/README.md

@@ -76,6 +76,11 @@ An example Flask application demonstrating how to use the [WorkOS Python SDK](ht
    (env) $ flask run
    ```
 
+   If you are using Mac OS 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
+   ```
+
    You'll know the server is running when you see no errors in the CLI, and output similar to the following is displayed:
 
    ```bash
@@ -87,18 +92,18 @@ An example Flask application demonstrating how to use the [WorkOS Python SDK](ht
    * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
    ```
 
-   Navigate to `localhost:5000` in your web browser. You should see a "Login" button. 
+   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. 
 
    You can stop the local Flask server for now by entering `CTRL + c` on the command line.
 
 
 ## Magic Link Setup with WorkOS
 
-Change the default REDIRECT_URI value in the "Configuration" page of your WorkOS dashboard to http://localhost:5000/success.
+Change the default REDIRECT_URI value in the "Configuration" page of your WorkOS dashboard to `http://localhost:5000/success`, or `http://localhost:5001/success` depending on which port you launched the server.
 
 ## Testing the Integration
 
-1. Naviagte to http://localhost:5000 to test out the Magic Link flow!
+1. Naviagte to http://localhost:5000, or `http://localhost:5001/success` depending on which port you launched the server, to test out the Magic Link flow!
 
 ## Need help?
 

python-flask-sso-example/README.md

@@ -71,13 +71,18 @@ An example Flask application demonstrating how to use the [WorkOS Python SDK](ht
    (env) $ echo $WORKOS_CLIENT_ID
    ```
 
-10. In `python-flask-sso-example/app.py` change the `CUSTOMER_EMAIL_DOMAIN` string value to an email domain that makes sense for your testing purposes if the default `gmail.com` isn't relevant. If you'd like to establish auth connection via Connection_ID instead, please change the `CUSTOMER_CONNECTION_ID` to your organization's connectionID. 
+10. 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.
 
 11. The final setup step is to start the server.
    ```bash
    (env) $ flask run
    ```
 
+   If you are using Mac OS 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
+   ```
+
    You'll know the server is running when you see no errors in the CLI, and output similar to the following is displayed:
 
    ```bash
@@ -89,7 +94,7 @@ An example Flask application demonstrating how to use the [WorkOS Python SDK](ht
    * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
    ```
 
-   Navigate to `localhost:5000` 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 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.
 
@@ -104,15 +109,15 @@ If you get stuck, please reach out to us at [email protected] so we can help.
 
 ## Testing the Integration
 
-1. 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.
+12. 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
    ```
 
-   Once running, navigate to http://localhost:5000 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!
 

python-flask-sso-example/app.py

@@ -14,11 +14,8 @@
 workos.project_id = os.getenv('WORKOS_CLIENT_ID')
 workos.base_api_url = 'http://localhost:7000/' if DEBUG else workos.base_api_url
 
-# There'd realistically be persons with different domains trying to sign in,
-# where some may have SSO and some may not. This example assumes only workos.com
-# domains with SSO setup.
-CUSTOMER_EMAIL_DOMAIN = 'gmail.com'
-CUSTOMER_CONNECTION_ID = 'conn_01FH8T97XSAF3TV249GHESFTED'
+# Enter Connection ID here
+CUSTOMER_CONNECTION_ID = 'xxx'
 
 @app.route('/')
 def login():
@@ -28,7 +25,6 @@ def login():
 def auth():
 
     authorization_url = workos.client.sso.get_authorization_url(
-        domain = CUSTOMER_EMAIL_DOMAIN,
         redirect_uri = url_for('auth_callback', _external=True),
         state = {},
         connection = CUSTOMER_CONNECTION_ID 
@@ -45,12 +41,6 @@ def auth_callback():
     p_profile = profile.to_dict()
     first_name = p_profile['profile']['first_name']
 
-    if "picture" in p_profile['profile']['raw_attributes']:
-        image = p_profile['profile']['raw_attributes']['picture']
-    else: 
-        image = "../static/images/workos_logo.png"
-
     raw_profile = p_profile['profile']
 
-
-    return render_template('login_successful.html', first_name=first_name, image=image, raw_profile=raw_profile)
+    return render_template('login_successful.html', first_name=first_name, raw_profile=raw_profile)

python-flask-sso-example/requirements.txt

@@ -1,2 +1,3 @@
 Flask==2.0.0
 workos==1.2.0
+python-dotenv

python-flask-sso-example/static/images/blurple_wombat.png

@@ -5,7 +5,6 @@
     <body class="container_success">
         <div class="logged_in_nav">
             <div class="flex">
-                <img src={{image}} alt="Profile Image">
                 <p>You're logged in {{first_name}}, welcome!</p>
             </div>
             <div>