Page refreshing automatically

[amd-srijaroy]

Hello,

I am a newbie. I want to integrate okta hosted login (python) to the reflex-chat. Below are the code changes I did. Please guide me.

Addition in state.py

class State(rx.State):

   ......

  def load_config(fname='./client_secrets.json'):
          config = None
          with open(fname) as f:
              config = json.load(f)
          return config
  
  
      config = load_config()
      
      ########################################################################################
      
      auth_token: str = rx.LocalStorage()
      auth_display = " Authorized. Redirecting. "
      # auth_token: str = rx.Cookie()
      
      should_redirect: bool = False
  
      def store_query_params(self):
          params = self.router.page.params
          print("params : ", params)
          if len(params) > 0 :
              serialized_params = rx.utils.serializers.serialize(params)
          else :
              serialized_params = ""
          self.auth_token = json.dumps(serialized_params)
          print("self.auth_token : ", self.auth_token)
          self.should_redirect = True
  
      @rx.var(cache=True)
      def is_authenticated(self) -> bool:
  
          print(bool(self.auth_token))
          return bool(self.auth_token)

In chat.py

from fastapi.responses import RedirectResponse




def login() -> rx.Component:
    
    query_params = {
        'client_id': config["client_id"],
        'redirect_uri': config["redirect_uri"],
        'scope': "openid email profile",
        'state': APP_STATE,
        'nonce': NONCE,
        'response_type': 'code',
        'response_mode': 'query'
    }

    request_uri = "{base_url}?{query_params}".format(
                                                        base_url=config["auth_uri"],
                                                        query_params=requests.compat.urlencode(query_params))
    
    return rx.redirect(request_uri)
    # return rx.vstack(
    #     rx.redirect(request_uri)
    # )
    
def require_okta_login(page):
                                                        
    @functools.wraps(page)
    def _auth_wrapper():
        return rx.cond(
            State.is_hydrated & State.is_hydrated,
            rx.cond(
                State.is_authenticated,
                page(),
                rx.chakra.spinner(on_mount=login())
            ),

        )
    return _auth_wrapper


async def callback(code: str):
    ..... # All code copied from okta example mentioned above 

    AUTH_TOKEN_LOCAL_STORAGE_KEY = {"unique_id" : okta_response["sub"],
                                    "user_email" : okta_response["email"],
                                    "user_name" : okta_response["given_name"],}

    url=str("http://localhost:3000/?" + urlencode(AUTH_TOKEN_LOCAL_STORAGE_KEY))
    print("url : ", url)
    return RedirectResponse(url)


@require_okta_login
def index() -> rx.Component:
    """The main app."""
    return rx.chakra.vstack(
        navbar(),
      .......

app.api.add_api_route("/authorization-code/callback", callback, methods=["GET"])

I can see in output logs as below

[23:29:10] Compiling: ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 100% 13/13 0:00:00
params : {}
self.auth_token : ""
True
url : http://localhost:3000/?unique_id=00uhxbd873czJjHzQ5d7&user_email=<###masked_email###>&user_name=<###masked_name###>
params : {'unique_id': '00uhxbd873czJjHzQ5d7', 'user_email': '<###masked_name###>', 'user_name': '<###masked_name###>'}
self.auth_token : "{"unique_id": "00uhxbd873czJjHzQ5d7", "user_email": "<###masked_name###>", "user_name": "<###masked_name###>"}"
True
url : http://localhost:3000/?unique_id=00uhxbd873czJjHzQ5d7&user_email=<###masked_email###>&user_name=<###masked_name###>
params : {'unique_id': '00uhxbd873czJjHzQ5d7', 'user_email': '<###masked_name###>', 'user_name': '<###masked_name###>'}
self.auth_token : "{"unique_id": "00uhxbd873czJjHzQ5d7", "user_email": "<###masked_name###>", "user_name": "<###masked_name###>"}"
True
url : http://localhost:3000/?unique_id=00uhxbd873czJjHzQ5d7&user_email=<###masked_email###>&user_name=<###masked_name###>

.....
.....

I masked confidential data.

Also I can see self.auth_token value in browser local storage with same serialised value as terminal log

But this page is continuously refreshing all by itself and thus the output in terminal.

Please anyone help me ? @adhami3310, @Alek99, @elviskahoro