Auth0 Login on Next.js

Has anyone else tried to set Auth0 in the Refine Next.js version? I'm having trouble to accomplish the same effect, as the refine doc is based on React https://refine.dev/docs/advanced-tutorials/auth/auth0/. I tried to adapt following the Auth0 doc https://auth0.com/docs/quickstart/webapp/nextjs/01-login.

The odd thing is it also have to move the authProvider inside the App component to access a hook through:

const App = () => {
    const { isLoading, isAuthenticated, user, logout, getIdTokenClaims } =
        useAuth0(); // <- this one

    if (isLoading) {
        return <span>loading...</span>;
    }

    const authProvider: AuthProvider = {
        login: () => {
...

const App = () => {
    const { isLoading, isAuthenticated, user, logout, getIdTokenClaims } =
        useAuth0(); // <- this one

    if (isLoading) {
        return <span>loading...</span>;
    }

    const authProvider: AuthProvider = {
        login: () => {
...

const App = () => {
    const { isLoading, isAuthenticated, user, logout, getIdTokenClaims } =
        useAuth0(); // <- this one

    if (isLoading) {
        return <span>loading...</span>;
    }

    const authProvider: AuthProvider = {
        login: () => {
...

const App = () => {
    const { isLoading, isAuthenticated, user, logout, getIdTokenClaims } =
        useAuth0(); // <- this one

    if (isLoading) {
        return <span>loading...</span>;
    }

    const authProvider: AuthProvider = {
        login: () => {
...

The Next.js version uses another hook called

useUser

useUser

useUser

useUser, but still, I have a dependency of the authProvider in the

[[...refine]].tsx

[[...refine]].tsx

[[...refine]].tsx

[[...refine]].tsx file.

I'd appreciate anyone's help, thanks.

Auth0 Login on Next.js

Similar Threads

Similar Threads

Similar Threads