This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2021-02-19
Channels
- # announcements (13)
- # asami (43)
- # babashka (35)
- # beginners (175)
- # calva (23)
- # cider (5)
- # clj-kondo (68)
- # cljsrn (4)
- # clojure (61)
- # clojure-australia (7)
- # clojure-europe (20)
- # clojure-gamedev (59)
- # clojure-israel (11)
- # clojure-italy (4)
- # clojure-nl (2)
- # clojure-norway (21)
- # clojure-spec (12)
- # clojure-uk (43)
- # clojurescript (9)
- # cursive (56)
- # data-oriented-programming (5)
- # datascript (1)
- # events (1)
- # fulcro (16)
- # honeysql (46)
- # leiningen (1)
- # malli (4)
- # off-topic (12)
- # pathom (46)
- # re-frame (24)
- # reagent (14)
- # reitit (1)
- # reveal (8)
- # rewrite-clj (16)
- # ring (13)
- # sci (9)
- # spacemacs (14)
- # specter (2)
- # sql (2)
- # tools-deps (1)
- # vim (2)
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"]))
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 😅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
(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 #(...)}
...]))
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
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