reagent

A minimalistic ClojureScript interface to React.js http://reagent-project.github.io/
lucian303 2021-02-19T01:15:00.078100Z

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"]))

Lu 2021-02-19T13:17:29.079300Z

(.-loginWithRedirect props) ?

Lu 2021-02-19T13:18:04.079500Z

or just use the hook version

Lu 2021-02-19T13:19:06.079700Z

(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 #(...)}
     ...]))

Lu 2021-02-19T13:19:15.079900Z

[:f> auth0-wrapper]

Lu 2021-02-19T13:19:22.080100Z

Note the f

lucian303 2021-02-19T19:04:41.080900Z

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

frankitox 2021-02-19T19:13:00.081800Z

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.

Lu 2021-02-19T19:19:38.084700Z

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

lucian303 2021-02-19T19:34:17.085Z

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

๐Ÿ‘ 1
Lu 2021-02-19T21:43:46.085300Z

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"])}))

frankitox 2021-02-19T02:24:51.078400Z

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 ๐Ÿ˜…

lucian303 2021-02-19T04:31:29.078600Z

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