Fork me on GitHub

i'm trying to call useAuth0 from the auth0-react component like in the second example here , 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"]))


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
     (fn [props]
       ;; props.auth0
       [button {:color :inherit
                :on-click #()}

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


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


(.-loginWithRedirect props) ?


or just use the hook version


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


[:f> auth0-wrapper]


Note the f


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


Nice, didn't know about :f>. I just translated what the auth0 readme does in this Note that you can only use :f> in the newest versions of reagent.


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


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

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

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