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,
)

[ericfeunekes]

Very nice and simple @jq6l43d1. How are you hosting it, did you split the app into two containers? And did you have to setup a custom route for the redirect URI, how are you handling that flow?

[DrummerViking]

hi @jq6l43d1 ,

I'm trying to use this example, but i'm wondering in line 30, where is the method "get_query_params()" coming from?
is that dictionary returning from the Auth url?

sorry if I'm asking silly questions, i'm just trying to accomplish this part and dealing with it for days.

thanks,

[jq6l43d1]

@ericfeunekes I'm so sorry I just saw your question. I'm hosting the site on an onsite server. The app is NOT split into two containers. I'm not doing anything too fancy. For the redirect uri I have added a page like this:

app.add_page(
    authorization_redirect,
    route="/authorization/redirect",
    on_load=State.ms_login,
)

[jq6l43d1]

@DrummerViking The code that I posted is now a bit dated. get_query_params() has been replaced in Reflex by self.router.page.params https://reflex.dev/docs/utility-methods/router-attributes/ Yes the dictionary comes from the query parameters in the auth url.