Vue Auth0 example returns error

cajawallace · October 12, 2022, 12:06pm

Hello, i have copied the Vue SDK quickstart guide to the letter.

I have installed the library via

 npm install @auth0/auth0-vue

then registered the plugin and copied the login page, attempting both regular and the options API. I get this error:

Cannot read properties of undefined (reading 'loginWithRedirect')

Did anybody else have the same issue? How do i register loginWithRedirect?

dan.woda · October 27, 2022, 5:17pm

Hi @cajawallace,

Welcome to the Auth0 Community!

Have you seen this issue on github? It looks like there are some solutions shared there

github.com/auth0/auth0-spa-js

TypeError: Cannot read property 'loginWithRedirect' of undefined

opened 11:25PM - 05 Jul 19 UTC

closed 12:50AM - 06 Jul 19 UTC

yirenlu92

Hey guys, I've been switching the use the new auth0 login with hooks, when I t…ry to do something very similar to the example, I keep encountering the following error: **TypeError: Cannot read property 'loginWithRedirect' of undefined** It appears that auth0Client is never getting set, so I'm never able to call loginWithRedirect on it. My credentials appear to be correct, and I've been able to login previously with them, so I'm wondering why that is. My code: ``` function Home(props) { const [value, setValue] = useState(""); const { isAuthenticated, loginWithRedirect, logout } = useAuth0(); const { sessionSubmitted, setSessionSubmitted } = useState(false); function handleChange(event) { setValue(event.target.value); } function handleSessionSubmit() { console.log("we are handling session submit"); console.log(value); props.history.push({ pathname: "/session", search: "?" + new URLSearchParams({ sessionId: value }).toString(), state: { sessionId: value } }); } return ( <div class="Home"> {" "} <div className="bar"> <AppBar position="static" style={{ background: "transparent", boxShadow: "none" }} > <Toolbar> <div className="title"> <Typography variant="title"> Frindle </Typography>{" "} </div>{" "} <Button onClick={() => loginWithRedirect({})}> {" "} Sign Up{" "} </Button>{" "} <Button onClick={() => loginWithRedirect({})}> {" "} Login{" "} </Button>{" "} </Toolbar>{" "} </AppBar>{" "} </div>{" "} <div className="sessionForm"> <form onSubmit={handleSessionSubmit}> <div className="text"> <TextField name="session" label="Session ID" value={value} onChange={handleChange} margin="normal" variant="outlined" /> </div>{" "} <div className="button"> <Button type="submit" color="primary" variant="outlined" className="button" > Submit{" "} </Button>{" "} </div>{" "} </form>{" "} </div>{" "} </div> ); } export default withRouter(Home); ```

system · November 28, 2022, 8:53pm

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
loginWithRedirect is not a function Get Help	3	2511	October 31, 2022
"Unable to issue redirect for OAuth 2.0 transaction" login Error Get Help sdk , auth0 , login , vuejs	3	3848	February 18, 2022
TypeError: Cannot read properties of null (reading 'loginWithRedirect') Get Help auth0 , login , vue , auth0-spa-js	2	4242	November 8, 2021
Auth0 and Vue Error: Unauthorized Get Help auth0 , authentication , vuejs , vue , vue-3	4	3270	July 28, 2022
Error: this.$auth0.loginWithRedirect is not a function Get Help auth0 , api , login	4	2391	July 28, 2022

Vue Auth0 example returns error

Related topics