Dash, Chainlit auth0 example

doc/apps/chainlit.md

@@ -64,13 +64,23 @@ To deploy a Chainlit app from the deployment menu, follow these instructions:
 To ensure your app doesn't break on re-deployments, pin your [dependencies.](pin-dependencies)
 ```
 
+## Production deployments
+
+Ploomber has features to help you deploy production-ready Chainlit apps
+
+### Authentication
+
+Our [integration with Auth0](auth0-integration) allows you to easily add authentication
+to any Chainlit app. There's no need to modify your Chainlit app code, only pass your
+Auth0 configuration parameters. Check out the [sample app.](https://github.com/ploomber/doc/tree/main/examples/chainlit/app-with-auth0)
+In addition to the Auth0 parameters you also need to pass the `CHAINLIT_AUTH_SECRET` value. Refer to [this section](chainlit-password) to learn more.
+
 ## Features
 
 Ploomber Cloud supports many features to help you build Streamlit applications quickly!
 
 - Integration with [GitHub](../user-guide/github.md)
 - Safely store [secrets](../user-guide/secrets.md) such as API keys
-- Add [password protection](chainlit-password) to your app
 - Usage [analytics](../user-guide/analytics.md) such as unique visitors, total requests, etc.
 - Spin up [larger resources](../user-guide/resources.md) (CPUs and RAM)
 - Spin up [GPUs](../user-guide/gpu.md)

doc/apps/dash.md

@@ -107,13 +107,22 @@ ploomber-cloud deploy --watch
 To ensure your app doesn't break on re-deployments, pin your [dependencies.](pin-dependencies)
 ```
 
+## Production deployments
+
+Ploomber has features to help you deploy production-ready Dash apps
+
+### Authentication
+
+Our [integration with Auth0](auth0-integration) allows you to easily add authentication
+to any Dash app. There's no need to modify your Dash app code, only pass your
+Auth0 configuration parameters. Check out the [sample app.](https://github.com/ploomber/doc/tree/main/examples/dash/app-with-auth0)
+
 ## Features
 
 Ploomber Cloud supports many features to help you build Dash applications quickly!
 
 - Integration with [GitHub](../user-guide/github.md)
 - Safely store [secrets](../user-guide/secrets.md) such as API keys
-- Add [password protection](../user-guide/password.md) to your app
 - Usage [analytics](../user-guide/analytics.md) such as unique visitors, total requests, etc.
 - Spin up [larger resources](../user-guide/resources.md) (CPUs and RAM)
 - Spin up [GPUs](../user-guide/gpu.md)

examples/chainlit/app-with-auth0/Dockerfile

@@ -0,0 +1,7 @@
+FROM python:3.11
+
+COPY app.py app.py
+COPY chainlit.md chainlit.md
+RUN pip install chainlit --no-cache-dir
+
+ENTRYPOINT ["chainlit", "run", "app.py", "--host=0.0.0.0", "--port=80", "--headless"]

examples/chainlit/app-with-auth0/app.py

@@ -0,0 +1,15 @@
+from typing import Optional
+
+import chainlit as cl
+
+
+@cl.header_auth_callback
+def header_auth_callback(headers: dict) -> Optional[cl.User]:
+    return cl.User(identifier=headers.get("X-Auth-Name", "Anonymous"),
+                   metadata={"role": "admin", "provider": "header"})
+
+
+@cl.on_message
+async def on_message(message: cl.Message):
+    response = f"Hello, you just sent: {message.content}!"
+    await cl.Message(response).send()

examples/chainlit/app-with-auth0/chainlit.md

@@ -0,0 +1 @@
+This app is hosted in [Ploomber Cloud!](https://ploomber.io/)

examples/dash/app-with-auth0/app.py

@@ -0,0 +1,34 @@
+from dash import dcc, html, Input, Output, Dash
+from flask import request
+
+app = Dash(__name__)
+server = app.server
+
+app.layout = html.Div(children=[
+    html.Div(id="greeting"),
+    html.Div(id="logout-link", children=[
+        dcc.Markdown(id="logout-msg"),
+        dcc.Link("Logout", href="/logout")
+    ]),
+    html.Div(id="dummy"),
+    dcc.Graph(
+        id='example-graph',
+        figure={
+            'data': [
+                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'Category 1'},
+                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': 'Category 2'},
+            ],
+            'layout': {
+                'title': 'Dash Data Visualization'
+            }
+        }
+    ),
+
+])
+
+
+@app.callback(Output("greeting", "children"), Input("dummy", "children"))
+def display_user(_):
+    user = request.headers.get('X-Auth-Name', 'Anonymous')
+    return f"Welcome {user}!"
+

examples/dash/app-with-auth0/requirements.txt

@@ -0,0 +1,2 @@
+dash
+gunicorn