如何将Auth0Provider添加到NextJS项目中？

hxzsmxv2 于 2023-04-30 发布在其他

关注(0)|答案(1)|浏览(104)

根据文件我应该可以做这样的事

// index.tsx

export default function Home() {
    let domain = process.env.NEXT_PUBLIC_AUTH0_DOMAIN;
    let clientId = process.env.NEXT_PUBLIC_AUTH0_CLIENT_ID;
    return (
        <Auth0Provider domain={domain} clientId={clientId} authorizationParams={{
            redirect_uri: window.location.origin
        }}>
            <>
                <Head>
                    <title>THEJackieGleason</title>
                    <meta name="description" content="My Personal Website"/>
                    <meta name="viewport" content="width=device-width, initial-scale=1"/>
                    <link rel="icon" href="/favicon.ico"/>
                </Head>
                <Header/>
                <div className={`${styles.wrapper} z-10`}>
                    <ThemeProvider theme={main}>
                        <HomePage/>
                        <Footer/>
                    </ThemeProvider>
                </div>

            </>
        </Auth0Provider>
    )
}

但当我试着建造时
error -错误[ReferenceError]：窗口未在Home（webpack-internal：///）中定义。/pages/index.tsx：73：23）在renderWithHooks（C：\Users\jacki\Code\next-site\node_modules\react-dom\cjs\react-dom-server.browser.development.js：5658：16）

那么，我如何做到这一点，并仍然能够访问窗口对象？

next.js

来源：https://stackoverflow.com/questions/76065570/how-do-i-add-a-auth0provider-to-a-nextjs-project

1条答案

按热度按时间

pw136qt21#

最后我使用useEffect让它正常工作。..

const [redirectUrl, setRedirectUrl] = useState<string>();
useEffect(() => {
    setRedirectUrl(window.location.origin);
    console.log(`Origin is ${redirectUrl}`);
}, []);
return redirectUrl && (
    <Auth0Provider domain={domain} clientId={clientId} authorizationParams={{
        redirect_uri: redirectUrl
    }}>
        <Header/>
        <div className={`${styles.wrapper} z-10`}>
            <ThemeProvider theme={main}>
                <HomePage/>
                <Footer/>
            </ThemeProvider>
        </div>
    </Auth0Provider>
)

赞(0）回复(0）举报 2023-04-30

我来回答

如何将Auth0Provider添加到NextJS项目中？

1条答案

相关问题

热门标签

最新问答