Wrapping external module

[n4rk0o]

Hello,

I would like to know how can I wrap a custom module dedicated to authentication.

I have the documentation of this module for a typical usage in a React application but I'm not sure how to implement it in my Reflex app.

I have already read the Reflex documentation regarding how to wrap an external module an I'm able to install it but I don't know how to use it, like how to call methods from this module.

By the way, I'm using the twitter example as a template to implement it.

I think I could use the example in this discussion here to implement it but I'm not using a Python module.

Thanks

[masenf]

If you need to call methods in an API for a react component, the prototypical way would be to set the id prop which causes reflex to create a react ref assigned to the component; then you can access this ref via rx.call_script to invoke methods on the component.

If you're wrapping a custom component, then a nice way to provide this is to offer methods on the Component class that return the rx.call_script that can be triggered from the frontend or backend.

Check out the example here: https://github.com/masenf/experiment-countdown-component/blob/f513f32c70f560c8648417593030787f014c25a6/experiment_countdown_component/countdown.py#L43-L57

If you need to get the result from calling an API function, then you can pass a state event handler as the callback parameter to the rx.call_script.

If you have a reference/docs to the actual component you're wrapping I might be able to give better guidance.

[n4rk0o]

The module is not public but here is the steps according to the documentation.

First step, I need to create a const like this in a specific file (auth_file.ts):

import { authModule } from '@auth/connect'

export const auth = authModule({
  auth_endpoint: 'http://endpoint',
  client_id: 'xxx'
  scope: 'openid'
});

Second step for request authorization:

import { auth } from './auth_file'

if (auth.isAuthorized()) {
  // do your thing
} else if (auth.getAuthorizationError()) {
  // do your thing
} else {
  auth.requestAuthorization();
}

Third step to authorize request to the backend:

import { auth } from './auth_file'

fetch('http://sso.autority.com/oauth2/userinfo', {
  method: 'GET',
  headers: new Headers({
    Authorization: auth.getAuthorizationHeader(),
  }),
});

[masenf]

First step would be handled via _get_custom_code(), just return this block of code from the component.

Second step would be handled by _get_hooks(), wrap this inside a useEffect function and then chain to a reflex on_authorized or on_authorization_error event triggers (example for converting reflex event chain into js code: https://github.com/masenf/reflex-intersection-observer/blob/04f39caee53f34580ebed83ea685f6fdda076205/custom_components/reflex_intersection_observer/intersection_observer.py#L71-L84)

The last bit, i'm much less clear on. I'm assuming this is to request user authentication related to the token... In this case i would probably include this snippet of code inside the if (auth.isAuthorized()) conditional and after getting the fetch response back, include the result in the call to a reflex event trigger for on_authorized.

This is just a rough outline.

I would say go through the intersection-observer component that I linked to above which does a lot of JS<->Reflex interfacing and see if you can piece together code that compiles into the JS you need (check in .web/pages). Personally, I don't think these need to be in particular files to work.

[n4rk0o]

Thanks for your help and time. I’ll try it and let you know asap