NextAuth.js? OAUTH, ??? ????, JWT ?? ???? Next.js? ?? ????????. 2. ?? ? Pages/API/auth/[... NextAuth] .js? ??? ? ?? ??????. 3. SessionProvider? ???? ?? ????? ????? ?? ??, ??, ?? ??? ?????. 4. ??? ? API ??? ???? ?? GetSession ?? GetServersession? ?????. 5. ?? ?? ?? ??? ???? ??? ?? ???? ???? JWT ??? ?????. 6. ??? ???? ??? ???? ??? ?? ??? ??? ?? ? ? ????. NextAuth.js? ?????? ?? ???? ?? ??? ? Serverless? ?? ???? ???? Next.js????. ?? ??? ??? ??? ???? ?? ?? ??? ?????.

Nextauth.js? ?? ?? ?? ?? ??? ??? ? ?????. ?? ?? ?? (? : OAUTH, ??? ????, JWT ?)? ????? ??? ???? ? ?? ??????? ?? ??? ???? ??? ?????.

??? Nextauth.js? ?? ?? ????? ???? ???? ????? ?????.

1. Nextauth.js? ??????

NextAuth.js? ??? ???? Next.js? ?? ?? ? ?? ?? ?? ????????.

• OAUTH ??? (Google, Github, Facebook ?)
• ???/?? ??? (???? ??)
• JWT ? ?? ??
• ??? ?? ?????? ?? (? : MongoDB, PostgreSQL)
• ??? ??? ???? ??? ????? API ??? ?????

API ???? ?? ?? ??? ???? ??? ??? useSession() ? ?? ??? ?? ??? ??? ????.

2. ?? ? ???

?? ???? ??????.

 NPM Next-Auth ??

?? ?? pages/api/auth/[...nextauth].js ?? ?? API ??? ????.

 'Next-Auth'?? NextAuth? ?????.
'Next-Auth/Providers/Google'?? GoogleProvider ?? ??;

?? ?? NextAuth ({
  ??? : [
    GoogleProvider ({
      clientId : process.env. google_client_id,
      clientsecret : process.env.google_client_secret,
    }),
  ],,
  ?? : Process.env.nextauth_secret,
  ??? : {
    ?? : '/auth/signin', // ??? ?? ??? ??? (?? ??)
  },
});

?? ?? : .env.local ?? ?? ??? ???????.

 Google_client_id = your-google-client-id
Google_client_secret = your-google-client-secret
nextauth_secret = y-very-secret-string-here

NEXTAUTH_SECRET JWT ? ??? ????? ? ???? openssl rand -base64 32 ???? ???? ?? ????.

3. ??? ?? ?? ??? ? ???? ?????

SessionProvider ???? ?? ????? ????? (????? _app.js ) :

 // pages/_app.js
'Next-Auth/React'?? {sessionprovider} ?? ??;
import '../styles/globals.css';

?? myApp ({component, pageProps}) {
  ?? (
    <SessionProvider Session = {pageProps.Session}>
      <component {... pageProps} />
    </sessionprovider>
  );
}

?? MyApp ????;

?? ?? ????? ??????.

 // pages/index.js
'Next-Auth/React'?? ?? ?? {useession, signin, signout};

???? ?? ?? home () {
  const {data : session} = useession ();

  if (??) {
    ?? (
      <>
        <p> ??, {session.user.email} </p>
        <?? onclick = {() => signout ()}> ?? ?? </button>
      </>
    );
  }

  ?? (
    <>
      <p> ??? ????? ?????. </p>
      <?? onclick = {() => signin ( &#39;google&#39;)}> Google </button>? ??????
    </>
  );
}

4. ??? ?? API ??? ??????

??? ?? (?? ? ???)

getServerSideProps ???? ??? ??????.

 Async ?? ???? GetServersideProps (????) {
  const session = getsession (????)? ?????.

  if (! ??) {
    ?? {
      ???? : {
        ??? : '/auth/signin',
        ?? : ??,
      },
    };
  }

  ?? {
    ?? : {??},
  };
}

API ???? ??????

 // pages/api/protected.js
'Next-Auth'?? {GetServersession} ?? ??;
'./auth/]?? {authoptions} ?? ??' ';

???? ?? ??? ?? ??? (req, res) {
  const session = getServersession (req, res, authoptions)? ?????.

  if (! ??) {
    return res.status (401) .json ({??? : '??'});
  }

  res.json ({??? : '?????, ????????!'});
}

5. ? ?? ?? ?? ?? (? : ?? ??)

????? ?? ???/????? ?? ? ? ???? (??? ?? ??) :

 'Next-Auth/Providers/Credentials'?? Credentialsprovider ?? ??;

?? ?? NextAuth ({
  ??? : [
    GoogleProvider ({...}),
    CredentialSprovider ({
      ?? : '?? ??',
      ?? ?? : {
        ??? : {??? : '???', ?? : '???'},
        ???? : {??? : '????', ?? : '????'}
      },
      ??? ?? (?? ??) {
        // ??? ????? ?? ??? ???? (??????? ???? ?)
        const user = {id : 1, name : 'john', ??? : credentials.email};

        if (???) {
          ?? ???; // ???? ???? ????? ??? ??? ??} else {
          ? ??; // ??? ??}
      }
    })
  ],,
  ?? : {
    ?? : 'JWT', // JWT? ???? ?? ????
  },
  ?? : {
    Async JWT ({Token, User}) {
      if (user) token.id = user.id;
      ?? ??;
    },
    ??? ?? ({??, ??}) {
      if (session.user) session.user.id = token.id;
      ?? ??;
    }
  }
});

?? ?? : Credentials ??? JWT ?? ??? ?????? ??? ??????? ????? ????.

6. ??? ?? ??? ??? (?? ??)

pages/auth/signin.js :

 'Next-Auth/React'?? {signin} ?? ??;

???? ?? ?? signin () {
  ?? (
    <div>
      <H1> ??? </h1>
      <?? onclick = {() => signin ( &#39;google&#39;)}> Google </button>? ??????
      <?? onclick = {() => signin ( &#39;Credentials&#39;, {email : &#39;test@test.com&#39;, ?? : &#39;123&#39;})}>
        ?? ???? ???????
      </??>
    </div>
  );
}

??

NextAuth.js? Next.js ??? ???? ????? ????.

• OAUTH, ??? ? ??? ?? ???? ?????
• ??? ?? ?? ? ?? ? ?? ??? ??????
• ??????? ?? ?? ? ? ???? (Prisma ?? ???? ??)
• ??? ?? ?, ??? ????? ??? ????? ?????.

?? ?? ? ??? ???? ? ? ? ?? Google? ??? ? ? ????. ?? ??? ??? ??? ?? (? : ?? ??, ?????? ??? ???) PRISMA ? ??? ?? callbacks ??? ?? ? ? ????.

????? ????? ??? ?? ??? ????? ????.

? ??? Nextauth.js? ?? ?? .js? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!