Какое значение, возвращаемое функцией useSession () в next-auth, возвращается?

Question

Я пишу проект Next.js и реализую аутентификацию с помощью GitHub и next-auth. В примерахnext-auth, есть звонок useSession(), который возвращает два объекта: session а также loading. Однако ни один из примеров, которые я видел, на самом деле не используетloading объект.

import React from 'react'
import { 
  useSession, 
  signin, 
  signout 
} from 'next-auth/client'

export default () => {
  const [ session, loading ] = useSession()

  return <p>
    {!session && <>
      Not signed in <br/>
      <button onClick={signin}>Sign in</button>
    </>}
    {session && <>
      Signed in as {session.user.email} <br/>
      <button onClick={signout}>Sign out</button>
    </>}
  </p>
}

Вопрос: какова цельloading, а как это используется на практике?

Answer 1

В loadingопция указывает, что состояние сеанса обновляется; этоtrue при получении данных сеанса и false когда будет сделано проверка.

Это немного сложно, как session свойство может быть заполнено уже, даже если оно загружается (например, потому что оно уже имеет кешированное значение, которое оно может использовать из предыдущего вызова), поэтому технически session может быть заполнен, даже если loading является true.

При использовании провайдера NextAuth.js в pages/_app.js в session объект вернулся из useSession также может быть заполнено, если getSession() был вызван getInitialProps() или getServerSideProps().

Если у вас есть активный сеанс, такие действия, как получение или потеря фокуса окна, заставят NextAuth.js снова проверить состояние сеанса в фоновом режиме, чтобы попытаться убедиться, что оно не устарело.

tl;dr

Когда вы проверяете loading ты, наверное, тоже хочешь проверить session не является nullпервый. Еслиsession состояние - это объект, у пользователя есть действующий сеанс, и вам не нужно ждать loading возвращаться.

Однако если session является null а также loading является false тогда у них определенно нет активного сеанса.

Answer 2

Вы можете создать свою собственную функцию загрузки, создав свой собственный useState:

      const [loading, setLoading] = useState(false);;

function handleGoogleLogIn() {
  signIn("google");
  setGoogleLoading(true);
}

а затем в вашем html

      { loading && (<div> your loading spinner or anything...</div>) }