to improve performance and allow components that call
+// `useSession()` anywhere in your application to access the `session` object.
+export default function App ({ Component, pageProps }) {
+ return (
+
+
+
+ )
+}
diff --git a/pages/api-example.js b/pages/api-example.js
new file mode 100644
index 0000000000..df00bc33d2
--- /dev/null
+++ b/pages/api-example.js
@@ -0,0 +1,17 @@
+import Layout from '../components/layout'
+
+export default function Page () {
+ return (
+
+ API Example
+ The examples below show responses from the example API endpoints.
+ You must be signed in to see responses.
+ Session
+ /api/examples/session
+
+ JSON Web Token
+ /api/examples/jwt
+
+
+ )
+}
\ No newline at end of file
diff --git a/pages/api/auth/[...nextauth].js b/pages/api/auth/[...nextauth].js
new file mode 100644
index 0000000000..e21d6ec003
--- /dev/null
+++ b/pages/api/auth/[...nextauth].js
@@ -0,0 +1,83 @@
+// @ts-check
+import NextAuth from "next-auth"
+import Providers from "next-auth/providers"
+
+export default NextAuth({
+ // https://next-auth.js.org/configuration/providers
+ providers: [
+ Providers.GitHub({
+ clientId: process.env.GITHUB_ID,
+ clientSecret: process.env.GITHUB_SECRET,
+ }),
+ ],
+ // Database optional. MySQL, Maria DB, Postgres and MongoDB are supported.
+ // https://next-auth.js.org/configuration/databases
+ //
+ // Notes:
+ // * You must to install an appropriate node_module for your database
+ // * The Email provider requires a database (OAuth providers do not)
+
+ // The secret should be set to a reasonably long random string.
+ // It is used to sign cookies and to sign and encrypt JSON Web Tokens, unless
+ // a separate secret is defined explicitly for encrypting the JWT.
+
+ session: {
+ // Use JSON Web Tokens for session instead of database sessions.
+ // This option can be used with or without a database for users/accounts.
+ // Note: `jwt` is automatically set to `true` if no database is specified.
+ jwt: true,
+
+ // Seconds - How long until an idle session expires and is no longer valid.
+ // maxAge: 30 * 24 * 60 * 60, // 30 days
+
+ // Seconds - Throttle how frequently to write to database to extend a session.
+ // Use it to limit write operations. Set to 0 to always update the database.
+ // Note: This option is ignored if using JSON Web Tokens
+ // updateAge: 24 * 60 * 60, // 24 hours
+ },
+
+ // JSON Web tokens are only used for sessions if the `jwt: true` session
+ // option is set - or by default if no database is specified.
+ // https://next-auth.js.org/configuration/options#jwt
+ jwt: {
+ encryption: true,
+ secret: process.env.SECRET,
+ // A secret to use for key generation (you should set this explicitly)
+ // secret: 'INp8IvdIyeMcoGAgFGoA61DdBglwwSqnXJZkgz8PSnw',
+ // Set to true to use encryption (default: false)
+ // encryption: true,
+ // You can define your own encode/decode functions for signing and encryption
+ // if you want to override the default behaviour.
+ // encode: async ({ secret, token, maxAge }) => {},
+ // decode: async ({ secret, token, maxAge }) => {},
+ },
+
+ // You can define custom pages to override the built-in pages.
+ // The routes shown here are the default URLs that will be used when a custom
+ // pages is not specified for that route.
+ // https://next-auth.js.org/configuration/pages
+ pages: {
+ // signIn: '/api/auth/signin', // Displays signin buttons
+ // signOut: '/api/auth/signout', // Displays form with sign out button
+ // error: '/api/auth/error', // Error code passed in query string as ?error=
+ // verifyRequest: '/api/auth/verify-request', // Used for check email page
+ // newUser: null // If set, new users will be directed here on first sign in
+ },
+
+ // Callbacks are asynchronous functions you can use to control what happens
+ // when an action is performed.
+ // https://next-auth.js.org/configuration/callbacks
+ callbacks: {
+ // signIn: async (user, account, profile) => { return Promise.resolve(true) },
+ // redirect: async (url, baseUrl) => { return Promise.resolve(baseUrl) },
+ // session: async (session, user) => { return Promise.resolve(session) },
+ // jwt: async (token, user, account, profile, isNewUser) => { return Promise.resolve(token) }
+ },
+
+ // Events are useful for logging
+ // https://next-auth.js.org/configuration/events
+ events: {},
+
+ // Enable debug messages in the console if you are having problems
+ debug: false,
+})
diff --git a/pages/api/examples/jwt.js b/pages/api/examples/jwt.js
new file mode 100644
index 0000000000..9c5f11c915
--- /dev/null
+++ b/pages/api/examples/jwt.js
@@ -0,0 +1,9 @@
+// This is an example of how to read a JSON Web Token from an API route
+import jwt from "next-auth/jwt"
+
+const secret = process.env.SECRET
+
+export default async (req, res) => {
+ const token = await jwt.getToken({ req, secret, encryption: true })
+ res.send(JSON.stringify(token, null, 2))
+}
diff --git a/pages/api/examples/protected.js b/pages/api/examples/protected.js
new file mode 100644
index 0000000000..876c6e9b73
--- /dev/null
+++ b/pages/api/examples/protected.js
@@ -0,0 +1,12 @@
+// This is an example of to protect an API route
+import { getSession } from 'next-auth/client'
+
+export default async (req, res) => {
+ const session = await getSession({ req })
+
+ if (session) {
+ res.send({ content: 'This is protected content. You can access this content because you are signed in.' })
+ } else {
+ res.send({ error: 'You must be sign in to view the protected content on this page.' })
+ }
+}
\ No newline at end of file
diff --git a/pages/api/examples/session.js b/pages/api/examples/session.js
new file mode 100644
index 0000000000..6b9c3bb2d8
--- /dev/null
+++ b/pages/api/examples/session.js
@@ -0,0 +1,7 @@
+// This is an example of how to access a session from an API route
+import { getSession } from 'next-auth/client'
+
+export default async (req, res) => {
+ const session = await getSession({ req })
+ res.send(JSON.stringify(session, null, 2))
+}
\ No newline at end of file
diff --git a/pages/client.js b/pages/client.js
new file mode 100644
index 0000000000..373e8d15a0
--- /dev/null
+++ b/pages/client.js
@@ -0,0 +1,22 @@
+import Layout from '../components/layout'
+
+export default function Page () {
+ return (
+
+ Client Side Rendering
+
+ This page uses the useSession() React Hook in the </Header> component.
+
+
+ The useSession() React Hook easy to use and allows pages to render very quickly.
+
+
+ The advantage of this approach is that session state is shared between pages by using the Provider in _app.js so
+ that navigation between pages using useSession() is very fast.
+
+
+ The disadvantage of useSession() is that it requires client side JavaScript.
+
+
+ )
+}
\ No newline at end of file
diff --git a/pages/index.js b/pages/index.js
new file mode 100644
index 0000000000..64c8afee41
--- /dev/null
+++ b/pages/index.js
@@ -0,0 +1,12 @@
+import Layout from 'components/layout'
+
+export default function Page () {
+ return (
+
+ NextAuth.js Example
+
+ This is an example site to demonstrate how to use NextAuth.js for authentication.
+
+
+ )
+}
diff --git a/pages/policy.js b/pages/policy.js
new file mode 100644
index 0000000000..4b07b5dc7c
--- /dev/null
+++ b/pages/policy.js
@@ -0,0 +1,30 @@
+import Layout from '../components/layout'
+
+export default function Page () {
+ return (
+
+
+ This is an example site to demonstrate how to use NextAuth.js for authentication.
+
+ Terms of Service
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ Privacy Policy
+
+ This site uses JSON Web Tokens and an in-memory database which resets every ~2 hours.
+
+
+ Data provided to this site is exclusively used to support signing in
+ and is not passed to any third party services, other than via SMTP or OAuth for the
+ purposes of authentication.
+
+
+ )
+}
\ No newline at end of file
diff --git a/pages/protected-ssr.js b/pages/protected-ssr.js
new file mode 100644
index 0000000000..0f44f6419f
--- /dev/null
+++ b/pages/protected-ssr.js
@@ -0,0 +1,37 @@
+// This is an example of how to protect content using server rendering
+import { getSession } from 'next-auth/client'
+import Layout from '../components/layout'
+import AccessDenied from '../components/access-denied'
+
+export default function Page ({ content, session }) {
+ // If no session exists, display access denied message
+ if (!session) { return }
+
+ // If session exists, display content
+ return (
+
+ Protected Page
+ {content}
+
+ )
+}
+
+export async function getServerSideProps(context) {
+ const session = await getSession(context)
+ let content = null
+
+ if (session) {
+ const hostname = process.env.NEXTAUTH_URL || 'http://localhost:3000'
+ const options = { headers: { cookie: context.req.headers.cookie } }
+ const res = await fetch(`${hostname}/api/examples/protected`, options)
+ const json = await res.json()
+ if (json.content) { content = json.content }
+ }
+
+ return {
+ props: {
+ session,
+ content
+ }
+ }
+}
diff --git a/pages/protected.js b/pages/protected.js
new file mode 100644
index 0000000000..f5151c0d11
--- /dev/null
+++ b/pages/protected.js
@@ -0,0 +1,33 @@
+import { useState, useEffect } from 'react'
+import { useSession } from 'next-auth/client'
+import Layout from '../components/layout'
+import AccessDenied from '../components/access-denied'
+
+export default function Page () {
+ const [ session, loading ] = useSession()
+ const [ content , setContent ] = useState()
+
+ // Fetch content from protected route
+ useEffect(()=>{
+ const fetchData = async () => {
+ const res = await fetch('/api/examples/protected')
+ const json = await res.json()
+ if (json.content) { setContent(json.content) }
+ }
+ fetchData()
+ },[session])
+
+ // When rendering client side don't display anything until loading is complete
+ if (typeof window !== 'undefined' && loading) return null
+
+ // If no session exists, display access denied message
+ if (!session) { return }
+
+ // If session exists, display content
+ return (
+
+ Protected Page
+ {content}
+
+ )
+}
\ No newline at end of file
diff --git a/pages/server.js b/pages/server.js
new file mode 100644
index 0000000000..f5adcee862
--- /dev/null
+++ b/pages/server.js
@@ -0,0 +1,38 @@
+import { useSession, getSession } from 'next-auth/client'
+import Layout from '../components/layout'
+
+export default function Page () {
+ // As this page uses Server Side Rendering, the `session` will be already
+ // populated on render without needing to go through a loading stage.
+ // This is possible because of the shared context configured in `_app.js` that
+ // is used by `useSession()`.
+ const [ session, loading ] = useSession()
+
+ return (
+
+ Server Side Rendering
+
+ This page uses the universal getSession() method in getServerSideProps().
+
+
+ Using getSession() in getServerSideProps() is the recommended approach if you need to
+ support Server Side Rendering with authentication.
+
+
+ The advantage of Server Side Rendering is this page does not require client side JavaScript.
+
+
+ The disadvantage of Server Side Rendering is that this page is slower to render.
+
+
+ )
+}
+
+// Export the `session` prop to use sessions with Server Side Rendering
+export async function getServerSideProps(context) {
+ return {
+ props: {
+ session: await getSession(context)
+ }
+ }
+}
diff --git a/pages/styles.css b/pages/styles.css
new file mode 100644
index 0000000000..6eea32003e
--- /dev/null
+++ b/pages/styles.css
@@ -0,0 +1,30 @@
+body {
+ font-family: -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+ padding: 0 1rem 1rem 1rem;
+ max-width: 680px;
+ margin: 0 auto;
+ background: #fff;
+ color: #333;
+}
+
+li,
+p {
+ line-height: 1.5rem;
+}
+
+a {
+ font-weight: 500;
+}
+
+hr {
+ border: 1px solid #ddd;
+}
+
+iframe {
+ background: #ccc;
+ border: 1px solid #ccc;
+ height: 10rem;
+ width: 100%;
+ border-radius: .5rem;
+ filter: invert(1);
+}
\ No newline at end of file
diff --git a/src/client/index.js b/src/client/index.js
index 0fa06a2c74..dd147051f0 100644
--- a/src/client/index.js
+++ b/src/client/index.js
@@ -142,7 +142,7 @@ const getProviders = async () => {
const SessionContext = createContext()
// Client side method
-const useSession = (session) => {
+export const useSession = (session) => {
// Try to use context if we can
const value = useContext(SessionContext)
@@ -223,13 +223,13 @@ const _useSessionHook = (session) => {
}
// Client side method
-const signIn = async (provider, args = {}) => {
+export const signIn = async (provider, args = {}) => {
const baseUrl = _apiBaseUrl()
- const callbackUrl = (args && args.callbackUrl) ? args.callbackUrl : window.location
+ const callbackUrl = args.callbackUrl ?? window.location
const providers = await getProviders()
// Redirect to sign in page if no valid provider specified
- if (!provider || !providers[provider]) {
+ if (!(provider in providers)) {
// If Provider not recognized, redirect to sign in page
window.location = `${baseUrl}/signin?callbackUrl=${encodeURIComponent(callbackUrl)}`
} else {
@@ -253,13 +253,13 @@ const signIn = async (provider, args = {}) => {
}
const res = await fetch(signInUrl, fetchOptions)
const data = await res.json()
- window.location = data.url ? data.url : callbackUrl
+ window.location = data.url ?? callbackUrl
}
}
// Client side method
-const signOut = async (args = {}) => {
- const callbackUrl = (args && args.callbackUrl) ? args.callbackUrl : window.location
+export const signOut = async (args = {}) => {
+ const callbackUrl = args.callbackUrl ?? window.location
const baseUrl = _apiBaseUrl()
const fetchOptions = {
@@ -276,11 +276,11 @@ const signOut = async (args = {}) => {
const res = await fetch(`${baseUrl}/signout`, fetchOptions)
const data = await res.json()
_sendMessage({ event: 'session', data: { trigger: 'signout' } })
- window.location = data.url ? data.url : callbackUrl
+ window.location = data.url ?? callbackUrl
}
// Provider to wrap the app in to make session data available globally
-const Provider = ({ children, session, options }) => {
+export const Provider = ({ children, session, options }) => {
setOptions(options)
return createElement(SessionContext.Provider, { value: useSession(session) }, children)
}
diff --git a/src/css/index.css b/src/css/index.css
index 12e3a306bd..a6c1b953ec 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -46,7 +46,7 @@ input[type] {
background: var(--color-background);
font-size: 1rem;
border-radius: var(--border-radius);
- box-shadow: inset 0 .1rem .2rem rgba(0,0,0,.2);
+ box-shadow: inset 0 .1rem .2rem rgba(0, 0, 0, .2);
&:focus {
box-shadow: none;
@@ -63,6 +63,7 @@ p {
a.button {
text-decoration: none;
line-height: 1rem;
+
&:link,
&:visited {
background-color: var(--color-background);
@@ -79,17 +80,17 @@ a.button {
background-color: var(--color-background);
font-size: 1rem;
border-radius: var(--border-radius);
- transition: all .1s ease-in-out;
- box-shadow: 0 0.15rem 0.3rem rgba(0,0,0,.15), inset 0 .1rem .2rem var(--color-background), inset 0 -.1rem .1rem rgba(0,0,0,.05);
+ transition: all .1s ease-in-out;
+ box-shadow: 0 0.15rem 0.3rem rgba(0, 0, 0, .15), inset 0 .1rem .2rem var(--color-background), inset 0 -.1rem .1rem rgba(0, 0, 0, .05);
font-weight: 500;
position: relative;
&:hover {
cursor: pointer;
}
-
+
&:active {
- box-shadow: 0 0.15rem 0.3rem rgba(0,0,0,.15), inset 0 .1rem .2rem var(--color-background), inset 0 -.1rem .1rem rgba(0,0,0,.1);
+ box-shadow: 0 0.15rem 0.3rem rgba(0, 0, 0, .15), inset 0 .1rem .2rem var(--color-background), inset 0 -.1rem .1rem rgba(0, 0, 0, .1);
background-color: var(--color-button-active-background);
border-color: var(--color-button-active-border);
cursor: pointer;
@@ -101,20 +102,21 @@ a.site {
text-decoration: none;
font-size: 1rem;
line-height: 2rem;
+
&:hover {
text-decoration: underline;
}
}
.page {
- position: absolute;
- width: 100%;
+ position: absolute;
+ width: 100%;
height: 100%;
display: table;
margin: 0;
padding: 0;
- > div {
+ >div {
display: table-cell;
vertical-align: middle;
text-align: center;
@@ -129,12 +131,14 @@ a.site {
padding-right: 2rem;
margin-top: .5rem;
}
+
.message {
margin-bottom: 1.5rem;
}
}
.signin {
+
button,
a.button,
input[type="text"] {
@@ -166,6 +170,7 @@ a.site {
border-radius: 0.3rem;
background: var(--color-info);
color: #fff;
+
p {
text-align: left;
padding: 0.5rem 1rem;
@@ -174,16 +179,19 @@ a.site {
}
}
- > div,
+ >div,
form {
display: block;
margin: 0 auto 0.5rem auto;
+
input[type] {
margin-bottom: 0.5rem;
}
+
button {
width: 100%;
}
+
max-width: 300px;
}
}
\ No newline at end of file
diff --git a/src/css/index.js b/src/css/index.js
index 6f2e78613a..a1021c3dc4 100644
--- a/src/css/index.js
+++ b/src/css/index.js
@@ -4,7 +4,8 @@
import fs from 'fs'
import path from 'path'
-const pathToCss = path.join(__dirname, '/index.css')
-const css = fs.readFileSync(pathToCss, 'utf8')
+const pathToCss = path.join(process.cwd(), '/dist/css/index.css')
-export default () => css
+export default function css () {
+ return fs.readFileSync(pathToCss, 'utf8')
+}
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000000..2d30e32cfd
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1 @@
+export { default } from './server'