이전 시간에는 config를 알아보았는데
이것을 내 프로젝트에서 어떤 메소드, util, helper가 있고, client단과 server단에서 사용할 수 있는 것들을 정리해 나갈 예정이다.

SessionProvider

먼저 SessionProvider는 우리가 익숙한 Context API를 적용한 것이다.
SessionProvider로 감싸준 하위에서 next-auth에서 제공하는 hook을 사용 할 수 있다.
뿐만아닌, 또한 탭/창 간에 세션을 업데이트하고 동기화하는 작업도 처리하는 다양한 Options 있으므로 먼저 다뤄보자

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}

session 은 getInitialProps 또는 개별 페이지 단위의 getServerSideProps에서 내려주는 값으로 사용하게 된다.

Options

<SessionProvider
      session={session}
      basePath="/"
      refetchInterval={5 * 60}
      refetchOnWindowFocus={true}
    >
      <Component {...pageProps} />
    </SessionProvider>

• refetchInterval : useSession 에서 update메소드가 이를 대체 할 수 있는데 session을 업데이트 할 때 사용하는 property이다.
  한 가지 주의할 점은 reftechInterval 은 반드시 session의 기간보다 짧아야한다.
• refetchOnWindowFocus : window 창에 focusing이되면 자체적으로 session의 값을 update 한다.

조금더 상세히 보자면

로그인 이전에는 자동적으로 업데이트를 하지 않는다.

Client

SignIn

• Client Use

singIn() 메소드는 로그인시 사용하는 메소드로 이전 포스팅에서 잠깐 봤지만 3가지의 인자 값과 그에따른 간편한 설정을 할 수가 있다.
authorizationParams는 여기에 써놓지 않겠다.

async function signIn(provider, options, authorizationParams) {
  ...
const res = await fetch(_signInUrl, {
    method: "post",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    // @ts-expect-error
    body: new URLSearchParams({
      ...options,
      csrfToken: await getCsrfToken(),
      callbackUrl,
      json: true,
    }),
  })
}

이건 next-auth에 signIn함수인데
post로 next-auth api server로 보내기에 클라이언트에서 보내는 email , pwd 를 같이 넣어 보내면 authorize 의 requset body에서 확인 할 수가 있다.

SignIn - options

export interface SignInOptions extends Record<string, unknown> {
  callbackUrl?: string
  redirect?: boolean // email 또는 credential일때만 유효한 프로퍼티이다. 
}

callbackUrl과 redirect가 보인다.

• callbackUrl : 로그인 완료 후 보내질 url이다. useRouter안써두 되는 편리함이 있다.
• redirect : redirect를 사용하지 않고 싶을 때 사용한다. e.g) 개발모드에서 처음 써보는 경우랄까?

useSession

• Client Use

useSession은 NextAuth에서 제공하는 React Hook이다.

@types  AwaitableReturnValues {
  data  : : Session / undefined / null
  status : "loading" | "authenticated" | "unauthenticated"
  update : (data?:any) : Promise<Session | null >
 }

const { data : session , status , update  } = useSession({
  required : boolean 
})

• data : data는 말 그대로 options에서 정의 한 session의 값이다.
• update : 토큰, 또는 session을 update할 때 사용하는 메소드이다. (refreshToken rotating관련 next-auth문서)

getSession()

• Client use

비동기 함수로서 Session helper이다. 현재의 활성화된 session 값을 return 한다.

export async function getSession(params?: GetSessionParams) {
  const session = await fetchData<Session>(
    "session",
    __NEXTAUTH,
    logger,
    params
  )
  if (params?.broadcast ?? true) {
    broadcast.post({ event: "session", data: { trigger: "getSession" } })
  }
  return session
}

위의 코드처럼 생겼다.

SignOut()

• Client use

로그아웃을 위한 next-auth의 메소드이며, 호출되면 session유지가 끊기게 된다.

Server

getServerSession()

서버사이드에서 호출하는 메소드이다.

// getServerSideProps
export async function getServerSideProps(context) {
  const session : Session | null = await getServerSession(context.req, context.res, authOptions);
  //...
}

// API Router
export default async function handler(req, res) {
  const session : Session | null = await getServerSession(req, res, authOptions)
  //...
  }

사용자가 로그인이 되어있던, 안되어있던 session 객체를 반환하는 useSession 과는 다르게,
getServerSession 은 로그인한 session 객체만을 반환한다. 그렇지 않다면 null을 반환 한다.