Skip to main content

快速开始/常规WEB应用/Next.js/

Next.js

配置Authok​

获取应用密钥​

你需要如下信息

  • Domain
  • Client ID
  • Client Secret

配置回调URL​

配置 Logout URL​

安装 AuthOK Next.js SDK​

npm i @authok/nextjs-authok --save

配置SDK​

在工程根目录创建.env.local文件:

AUTHOK_SECRET='use [openssl rand -hex 32] to generate a 32 bytes value'
AUTHOK_BASE_URL='http://localhost:3000'
AUTHOK_ISSUER_BASE_URL='https://YOUR_DOMAIN'
AUTHOK_CLIENT_ID='YOUR_CLIENT_ID'
AUTHOK_CLIENT_SECRET='YOUR_CLIENT_SECRET'

添加动态 API 路由​

pages/api/auth/[...authok].js
import { handleAuth } from '@authok/nextjs-authok';

export default handleAuth();

添加 UserProvider 组件​

pages/_app.js
import React from 'react';
import { UserProvider } from '@authok/nextjs-authok';

export default function App({ Component, pageProps }) {
  return (
    <UserProvider>
      <Component {...pageProps} />
    </UserProvider>
  );
}

添加登录​

<a href="/api/auth/login">登录</a>

添加注销​

<a href="/api/auth/logout">注销</a>

显示用户信息​

import React from 'react';
import { useUser } from '@authok/nextjs-authok';

export default function Profile() {
  const { user, error, isLoading } = useUser();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>{error.message}</div>;

  return (
    user && (
      <div>
        <img src={user.picture} alt={user.name} />
        <h2>{user.name}</h2>
        <p>{user.email}</p>
      </div>
    )
  );
}