== @ensono-stacks/next:next-auth

.Add Next Authentication to your next application
[%collapsible]
=====
The next-auth generator will install and configure https://next-auth.js.org/[NextAuth.js] into an existing Next application. It will add the initial configuration, add the session provider, setup an API endpoint and add local environmental variables. It will also configure provider specific setup.

[discrete]
=== Prerequisites

An existing https://nextjs.org/[Next] application

[discrete]
=== Usage

[source, bash]
nx g @ensono-stacks/next:next-auth

[discrete]
=== Command line arguments

The following command line arguments are available:

[cols="1,1,1,1,1"]
|===
|Option |Description | Type | Accepted Values|Default

|--project
|The name of the project
|nameOfApplication
|string
|N/A

|--provider
|The provider to be installed
|string
|none/azureAd
|none

|--skipPackageJson
|Do not add dependencies to `package.json`
|boolean
|true/false
|false
|===

[discrete]
=== Generator Output

- Creates a new Next API endpoint with the file name `[...nextauth].ts`. This contains the dynamic route handler for NextAuth.js which will also contain all of your global NextAuth.js configurations. If you have specified a provider when running the generator this will be added to the providers array

./apps/appName/pages/api/[...nextauth].ts
[source, typescript]
----
import NextAuth from 'next-auth';
import AzureADProvider from 'next-auth/providers/azure-ad';
const nextAuth = NextAuth({
  providers: [
    AzureADProvider({
      clientId: process.env.AZURE_AD_CLIENT_ID,
      clientSecret: process.env.AZURE_AD_CLIENT_SECRET,
      tenantId: process.env.AZURE_AD_TENANT_ID,
    }),
  ],
});
export default nextAuth;
----

- Install the next-auth package and add to package.json, unless the `--skipPackageJson` option was used

./package.json
[source, json]
"dependencies": {
    ...otherDependencies
    "next-auth": "4.18.8",
},

- Create or append an `.env.local` file. Adding required next auth environmental variables. These will vary depending on the provider chosen. 

./.env.local
[source, typescript]
NEXTAUTH_URL=http://localhost:4200
NEXTAUTH_SECRET=secretValue
AZURE_AD_CLIENT_ID=
AZURE_AD_CLIENT_SECRET=
AZURE_AD_TENANT_ID=

NOTE: Be sure to update the environmental variables with the values provided by your provider

- Append the `_app.tsx` file with a https://next-auth.js.org/getting-started/client#sessionprovider[session provider] 

./apps/appName/_app.tsx
[source, typescript]
----
import { AppProps } from 'next/app';
import Head from 'next/head';
import './styles.css';
import { SessionProvider } from 'next-auth/react';
function CustomApp({
  Component,
  pageProps: { session, ...pageProps },
}: AppProps) {
  return (
    <SessionProvider session={session}>
      <Head>
        <title>Welcome to testing!</title>
      </Head>
      <main className="app">
        <Component {...pageProps} />
      </main>
    </SessionProvider>
  );
}
export default CustomApp;
----

From here with the configuration complete it is now possible to access the https://next-auth.js.org/getting-started/client#usesession[useSession] hook from next auth. For further information please see the https://next-auth.js.org/getting-started/example#frontend---add-react-hook[Getting Started Guide to Next Auth]
=====