Clojurians Log v2
reagent
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"]))
(.-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)]
[:div
{: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? @lucio
Yup! Just the reagent docs https://github.com/reagent-project/reagent/blob/master/doc/ReactFeatures.md#function-components
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.
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
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"])}))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)))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