[Python] Auth session exchange inside React IFrame to python plotly-dash

I have two separate app authenticate with same Auth0 domain with two client IDs. I want to integrate one inside the other using iframe. I am using reactjs for Iframe and my other application is Python dash app. Do i need to do some additional configurations from Aouth0 or can i use basic Aouth0 app for both.

import React from "react";

const MyIFrame: React.FC = () => {
return (
<iframe
src={`http://localhost:8090/`}
title="Authenticated Iframe"
width="100%"
height="1200px"
sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
referrerPolicy="no-referrer-when-downgrade"
frameBorder="none"
/>
);
};

export default MyIFrame;


This is my dash + flask app

@app.callback(Output("page-content", "children"),
Input("url", "pathname"))
def display_page(pathname):
print("Current session data:", session)
if 'user' not in session:
return dcc.Location(href="/login", id="redirect-login")
if pathname == "/":
return base_layout
else:
return html.Div("404 Page Not Found")


oauth = OAuth(app.server)
oauth.register(
"auth0",
client_id=os.getenv("AUTH0_CLIENT_ID"),
client_secret=os.getenv("AUTH0_CLIENT_SECRET"),
client_kwargs={
"scope": "openid profile email",
'state': False
},
server_metadata_url=f'https://{os.getenv("AUTH0_DOMAIN")}/.well-known/openid-configuration',
state=None,
)

@app.server.route("/login")
def login():
return oauth.auth0.authorize_redirect(redirect_uri=url_for("callback", _external=True))

@app.server.route("/callback", methods=["GET", "POST"])
def callback():
token = oauth.auth0.authorize_access_token()
session["user"] = token # Store user token in session
return redirect("/")

@app.server.route("/logout")
def logout():
session.clear()
return redirect(
"https://" + os.getenv("AUTH0_DOMAIN")
+ "/v2/logout?"
+ urlencode(
{
"returnTo": url_for("home", _external=True),
"client_id": os.getenv("AUTH0_CLIENT_ID"),
},
quote_via=quote_plus,
)
)

Continue reading...