AAD MSAL Auth in Reflex

[viswanadula8828]

Can you someone help me with how can I do msal authentication in reflex ? As my org uses aad.

[ericfeunekes]

I am self-hosting Reflex in two Azure Web Apps and added AAD auth (see here) around the frontend web app. It works. The problem is I don't have way to pass the ID tokens to the backend from the front end. Tracked at #2704

[jq6l43d1]

I've been using MSAL to authenticate users of my reflex site for a while now. Here is the code I use.

State code:

    import msal

    logged_in: bool = False
    token_response: dict = {}

    def logged_in_check(self):
        """Checks if the user is logged in and redirects accordingly."""
        print("logged_in_check")
        print(self.router.page.path)
        if self.logged_in == False:
            auth_url = self.create_ms_app().get_authorization_request_url(
                ["User.Read"], 
                REDIRECT_URI=REDIRECT_URI
            )
            return rx.redirect(auth_url)

    def create_ms_app(self):
        """Creates a ConfidentialClientApplication for Microsoft authentication."""
        return msal.ConfidentialClientApplication(
            CLIENT_ID, 
            authority=AUTHORITY, 
            client_credential=CLIENT_SECRET
        )

    def ms_login(self):
        """Logs in the user using Microsoft authentication and updates the app state."""

        print('ms_login')

        auth_dict = self.get_query_params()
        auth_code = auth_dict['code']

        self.token_response = self.create_ms_app().acquire_token_by_authorization_code(
            auth_code, 
            ["User.Read"], 
            redirect_uri=REDIRECT_URI
        )

        if 'error' in self.token_response:
            print('error in token response')
            self.reset()
            return rx.redirect("/")
        
        self.account = self.token_response['id_token_claims']['preferred_username'].lower()
        self.username = self.token_response['id_token_claims']['name']
        self.first_name = self.username.split()[0]

        print(self.username)

        self.logged_in = True

        return rx.redirect("/")

page code:

app.add_page(
    index,
    on_load=State.logged_in_check,
)

[jryberg]

@jq6l43d1 , did you pentest that solution?

The on_load method seems to render the content in the front end first and then evaluate the state for a redirect

I tried your solution but I can see the content of the "index" page even if it also tries to redirect to the login page. At least in my test case. Try using w3m or some other Linux CLI tool that ignores java script and just render content.

[RadheRadhe-constructions]

@jryberg you need to add another route which says /msal_login with loading component. And then redirect to the desired page

[jryberg]

@jryberg you need to add another route which says /msal_login with loading component. And then redirect to the desired page

Do you have any working example?

I find it hard to use on_load method to the "secured" pages to evaluate if the session is authenticated or not since part of the page is still rendered and sent to the frontend

[viswanadula8828]

@jryberg

there is a blog on Azure AAD in reflex website. Check it out

[jryberg]

@jryberg

there is a blog on Azure AAD in reflex website. Check it out

Well, it does not work as most users will think.

This is my test page with working SSO towards Microsoft Entra ID. The SSO works just fine and I get the bearer token just fine with my username included in the response.

"""The help page."""

from pathlib import Path
from ..backend.auth import State as SsoState

import reflex as rx

from .. import styles
from ..templates import template


@template(route="/help", title="Help", on_load=SsoState.require_auth)
def helppage() -> rx.Component:
    """The help page.

    Returns:
        The UI for the help page.
    """
    with Path("README.md").open(encoding="utf-8") as readme:
        content = readme.read()
    return rx.vstack(
        rx.text(f"Hello {SsoState.token['name']}"),
        rx.markdown(content, component_map=styles.markdown_style),
        rx.text("This is super secret text"),
    )

As I stated, most users will now think that the page actually requires authentication but the page is rendered just fine, it's just the state variables that are not populated until the "on_load" function has returned

This is the output using w3m CLI tool

[logo_white]
[logo_white]

Hello undefined

Welcome to This test web page

This is super secret text

The point is that data on the protected URL is rendered and sent to the front end. It's not actual authentication.

I really started to enjoy Reflex but it's missing crucial parts regarding real authentication

[RadheRadhe-constructions]

You sent it to the wrong person.

…

@jryberg <https://github.com/jryberg> you need to add another route which says /msal_login with loading component. And then redirect to the desired page Do you have any working example? I find it hard to use on_load method to the "secured" pages to evaluate if the session is authenticated or not since part of the page is still rendered and sent to the frontend — Reply to this email directly, view it on GitHub <#2539 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BKTSVPPTABSA42X7AP7WZL32PNAXPAVCNFSM6AAAAABC4XWF6OVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTEMJXGE2DEOI> . You are receiving this because you commented.Message ID: ***@***.***>