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.