Fork me on GitHub
#reagent
<
2021-02-19
>
lucian30301:02:00

i'm trying to call useAuth0 from the auth0-react component like in the second example here https://github.com/auth0/auth0-react#use-with-a-class-component , so i can get js functions to add to the on click events of my buttons to log in, but when i call it, i'm getting a react error Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons ... etc. i'm not very familiar w/ react internal or why this would happen. the js looks trivial but i'm not really sure how to call this and extract the functions i would need in cljs to call in my on-click handlers. any ideas how to make this work in reagent?

(defn auth0-login []
  (let [auth0 (auth0-react/useAuth0)]
    [button {:color    :inherit
             :on-click #()} "Login"]))

frankitox02:02:51

Well, all reagent components end up as React class components. So, you are on the right track looking at that part of auth0 docs. I think you should be able to do something like this:

(def inner-auth0-login
  (reagent/create-class
    {:reagent-render
     (fn [props]
       ;; props.auth0
       [button {:color :inherit
                :on-click #()}
        "Login"])}))

(def auth0-login (reagent/adapt-react-class (withAuth0 inner-auth0-login)))
But I didn't test it 😅

lucian30304:02:29

i c. i'm still not sure how to access the properties from calling withAuth0() (js), specifically loginWithRedirect() so i can call it from the event handler. props seems to be undefined in this case

Lu13:02:29

(.-loginWithRedirect props) ?

Lu13:02:04

or just use the hook version

Lu13:02:06

(defn auth0-wrapper []
  (let [use-auth0 (useAuth0)
        login-with-redirect (.-loginWithRedirect use-auth0)
        is-authenticated? (.-isAuthenticated use-auth0)
        is-loading? (.-isLoading use-auth0)]
    [:div
     {:on-click #(...)}
     ...]))

Lu13:02:15

[:f> auth0-wrapper]

Lu13:02:22

Note the f

lucian30319:02:41

the props version didn't work cause props was nil, but this hook version does! what is the :f> is there some documentation i can read about it to get more familiar? @UE35Y835W

frankitox19:02:00

Nice, didn't know about :f>. I just translated what the auth0 readme does in this https://gist.github.com/frankitox/3a0306ad3f2fa078767314d59930810c. Note that you can only use :f> in the newest versions of reagent.

Lu19:02:38

Nice I put the loginWithRedirect fn call in an effect hook because I want to avoid the extra step of clicking a button to land on login page .. I guess it depends on how one is using auth0.. if the app has some Public pages then it makes sense to dispatch on click from a login button

lucian30319:02:17

yeah this is really cool. i'm finally starting to understand the ecosystem and how it operates w/ the react/js stuff as i skipped react altogether and jumped straight to reagent

👍 3
Lu21:02:46

BTW for completeness the class example works as well.. not sure why you’re getting nil props:

(def inner-auth0-login
    (r/create-class
     {:reagent-render
      (fn [_]
        (js/console.log (-> (r/current-component) .-props))
        [:button {:on-click #()}
         "Login"])}))