BASH

1% npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
2
3% npm run dev

BASH

1% npm install next-auth

TEXT

1// /pages/api/auth/[...nextauth].js 
2import NextAuth from "next-auth";
3import Providers from "next-auth/providers";
4
5const options = {
6    providers: [
7        Providers.GitHub({
8            clientId: process.env.NEXTAUTH_GITHUB_ID,
9            clientSecret: process.env.NEXTAUTH_GITHUB_SECRET,
10        }),
11    ],
12}
13
14export default (req, res) => NextAuth(req, res, options)
15
16// /pages/articles/index.js 
17import Link from 'next/link'
18import { getSession } from 'next-auth/client'
19
20function index({ session, articles }) {
21
22    if (!session) { return (<div>You need to be logged on</div>) }
23    
24    return (
25        <div>
26            <ul>
27                {articles.map(article => (<li key={article.id}>
28                    <Link href={`/articles/${article.id}`}>
29                        <a>{article.title}</a>
30                    </Link>
31                </li>))}
32            </ul>
33        </div>
34    )
35}
36
37export default index
38
39export const getServerSideProps = async (context) => {
40
41    const session = await getSession(context);
42
43    // If no session exists, display access denied message
44    if (!session) {
45        return {
46            props: {
47                session,
48            }
49        }
50    }
51
52
53    const res = await fetch('https://jsonplaceholder.typicode.com/posts')
54    const articles = await res.json();
55
56    return {
57        props: {
58            session,
59            articles
60        }
61    }
62}
63
64// /pages/articles/[id]/index.js
65import { getSession } from 'next-auth/client'
66
67function article({ session, article }) {
68
69    if (!session) { return (<div>You need to be logged on</div>) }
70
71    return (
72        <div>
73            <h1>{article.title}</h1>
74            This is article {article.id}
75            <p>{article.body}</p>
76        </div>
77    )
78}
79
80export default article
81
82export const getServerSideProps = async (context) => {
83
84    const session = await getSession(context);
85
86    // If no session exists, display access denied message
87    if (!session) {
88        return {
89            props: {
90                session,
91            }
92        }
93    }
94    
95    const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${context.params.id}`)
96    const article = await res.json()
97    return {
98        props: {
99            session,
100            article
101        }
102    }
103}

TEXT

1import NextAuth from "next-auth";
2import GihubProvider from "next-auth/providers/github"
3import AzureADProvider from "next-auth/providers/azure-ad"
4
5// https://haddleynexttodo.azurewebsites.net/api/auth/signin
6
7// Authorization callback URL: https://haddleynexttodo.azurewebsites.net/api/auth/callback/github
8// Authorization callback URL: https://haddleynexttodo.azurewebsites.net/api/auth/callback/azure-ad
9
10export default NextAuth({
11    providers: [
12        GihubProvider({
13            clientId: process.env.NEXTAUTH_GITHUB_ID, 
14            clientSecret: process.env.NEXTAUTH_GITHUB_SECRET, 
15        }),
16        AzureADProvider({
17            clientId: process.env.AZURE_AD_CLIENT_ID,
18            clientSecret: process.env.AZURE_AD_CLIENT_SECRET,
19            tenantId: process.env.AZURE_AD_TENANT_ID,
20            authorization: { params: { scope: "openid email profile" } }, 
21        })
22    ],
23    secret: process.env.NEXTAUTH_SECRET,
24    debug: true
25})