-
Hi there!
- {!AuthUser ? (
+ if (!user) {
+ return (
+ <>
+
Hi there!
You are not signed in.{' '}
Sign in
- ) : (
-
-
You're signed in. Email: {AuthUser.email}
-
{
- try {
- await logout()
- Router.push('/auth')
- } catch (e) {
- console.error(e)
- }
- }}
- >
- Log out
-
-
- )}
+
+ )
+ }
+
+ return (
+
+
+
You're signed in. Email: {user.email}
+
logout()}
+ >
+ Log out
+
+
-
-
Your favorite food is {favoriteFood}.
-
+ {error &&
Failed to fetch food!
}
+ {data &&
Your favorite food is {data.food}.
}
)
}
-// Just an example.
-const mockFetchData = async (userId) => ({
- user: {
- ...(userId && {
- id: userId,
- }),
- },
- favoriteFood: 'pizza',
-})
-
-Index.getInitialProps = async (ctx) => {
- // Get the AuthUserInfo object. This is set in `withAuthUser.js`.
- // The AuthUserInfo object is available on both the server and client.
- const AuthUserInfo = get(ctx, 'myCustomData.AuthUserInfo', null)
- const AuthUser = get(AuthUserInfo, 'AuthUser', null)
-
- // You can also get the token (e.g., to authorize a request when fetching data)
- // const AuthUserToken = get(AuthUserInfo, 'token', null)
-
- // You can fetch data here.
- const data = await mockFetchData(get(AuthUser, 'id'))
-
- return {
- data,
- }
-}
-
-Index.displayName = 'Index'
-
-Index.propTypes = {
- AuthUserInfo: PropTypes.shape({
- AuthUser: PropTypes.shape({
- id: PropTypes.string.isRequired,
- email: PropTypes.string.isRequired,
- emailVerified: PropTypes.bool.isRequired,
- }),
- token: PropTypes.string,
- }),
- data: PropTypes.shape({
- user: PropTypes.shape({
- id: PropTypes.string,
- }).isRequired,
- favoriteFood: PropTypes.string.isRequired,
- }).isRequired,
-}
-
-Index.defaultProps = {
- AuthUserInfo: null,
-}
-
-// Use `withAuthUser` to get the authed user server-side, which
-// disables static rendering.
-// Use `withAuthUserInfo` to include the authed user as a prop
-// to your component.
-export default withAuthUser(withAuthUserInfo(Index))
+export default Index
diff --git a/examples/with-firebase-authentication/utils/auth/firebaseSessionHandler.js b/examples/with-firebase-authentication/utils/auth/firebaseSessionHandler.js
deleted file mode 100644
index a9b0d08ee7f2..000000000000
--- a/examples/with-firebase-authentication/utils/auth/firebaseSessionHandler.js
+++ /dev/null
@@ -1,23 +0,0 @@
-// From:
-// https://github.com/vercel/next.js/blob/canary/examples/with-firebase-authentication/pages/index.js
-
-export const setSession = (user) => {
- // Log in.
- if (user) {
- return user.getIdToken().then((token) => {
- return fetch('/api/login', {
- method: 'POST',
- // eslint-disable-next-line no-undef
- headers: new Headers({ 'Content-Type': 'application/json' }),
- credentials: 'same-origin',
- body: JSON.stringify({ token }),
- })
- })
- }
-
- // Log out.
- return fetch('/api/logout', {
- method: 'POST',
- credentials: 'same-origin',
- })
-}
diff --git a/examples/with-firebase-authentication/utils/auth/hooks.js b/examples/with-firebase-authentication/utils/auth/hooks.js
deleted file mode 100644
index 307c964fd518..000000000000
--- a/examples/with-firebase-authentication/utils/auth/hooks.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import firebase from 'firebase/app'
-import 'firebase/auth'
-import initFirebase from './initFirebase'
-import { setSession } from './firebaseSessionHandler'
-import { createAuthUserInfo } from './user'
-
-initFirebase()
-
-// https://benmcmahen.com/using-firebase-with-react-hooks/
-
-// Defaults to empty AuthUserInfo object.
-export const AuthUserInfoContext = React.createContext(createAuthUserInfo())
-
-export const useAuthUserInfo = () => {
- return React.useContext(AuthUserInfoContext)
-}
-
-// Returns a Firebase JS SDK user object.
-export const useFirebaseAuth = () => {
- const [state, setState] = useState(() => {
- const user = firebase.auth().currentUser
- return {
- initializing: !user,
- user,
- }
- })
-
- function onChange(user) {
- setState({ initializing: false, user })
-
- // Call server to update session.
- setSession(user)
- }
-
- useEffect(() => {
- // Listen for auth state changes.
- const unsubscribe = firebase.auth().onAuthStateChanged(onChange)
-
- // Unsubscribe to the listener when unmounting.
- return () => unsubscribe()
- }, [])
-
- return state
-}
diff --git a/examples/with-firebase-authentication/utils/auth/logout.js b/examples/with-firebase-authentication/utils/auth/logout.js
deleted file mode 100644
index 307ec9cf54fc..000000000000
--- a/examples/with-firebase-authentication/utils/auth/logout.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/* globals window */
-import firebase from 'firebase/app'
-import 'firebase/auth'
-
-export default async function logout() {
- return firebase
- .auth()
- .signOut()
- .then(() => {
- // Sign-out successful.
- if (typeof window !== 'undefined') {
- // Remove the server-side rendered user data element. See:
- // https://github.com/vercel/next.js/issues/2252#issuecomment-353992669
- try {
- const elem = window.document.getElementById('__MY_AUTH_USER_INFO')
- elem.parentNode.removeChild(elem)
- } catch (e) {
- console.error(e)
- }
- }
- return true
- })
- .catch((e) => {
- console.error(e)
- return false
- })
-}
diff --git a/examples/with-firebase-authentication/utils/auth/useUser.js b/examples/with-firebase-authentication/utils/auth/useUser.js
new file mode 100644
index 000000000000..3e14eb309de1
--- /dev/null
+++ b/examples/with-firebase-authentication/utils/auth/useUser.js
@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
+import cookies from 'js-cookie'
+import firebase from 'firebase/app'
+import 'firebase/auth'
+import initFirebase from '../auth/initFirebase'
+
+initFirebase()
+
+const useUser = () => {
+ const [user, setUser] = useState()
+ const router = useRouter()
+
+ const logout = async () => {
+ return firebase
+ .auth()
+ .signOut()
+ .then(() => {
+ // Sign-out successful.
+ cookies.remove('auth')
+ router.push('/auth')
+ })
+ .catch((e) => {
+ console.error(e)
+ })
+ }
+
+ useEffect(() => {
+ const cookie = cookies.get('auth')
+ if (!cookie) {
+ router.push('/')
+ return
+ }
+ setUser(JSON.parse(cookie))
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [])
+
+ return { user, logout }
+}
+
+export { useUser }
diff --git a/examples/with-firebase-authentication/utils/auth/user.js b/examples/with-firebase-authentication/utils/auth/user.js
deleted file mode 100644
index a6be82ce04c9..000000000000
--- a/examples/with-firebase-authentication/utils/auth/user.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import { get, has } from 'lodash/object'
-
-/**
- * Take the user object from Firebase (from either the Firebase admin SDK or
- * or the client-side Firebase JS SDK) and return a consistent AuthUser object.
- * @param {Object} firebaseUser - A decoded Firebase user token or JS SDK
- * Firebase user object.
- * @return {Object|null} AuthUser - The user object.
- * @return {String} AuthUser.id - The user's ID
- * @return {String} AuthUser.email - The user's email
- * @return {Boolean} AuthUser.emailVerified - Whether the user has verified their email
- */
-export const createAuthUser = (firebaseUser) => {
- if (!firebaseUser || !firebaseUser.uid) {
- return null
- }
- return {
- id: get(firebaseUser, 'uid'),
- email: get(firebaseUser, 'email'),
- emailVerified: has(firebaseUser, 'emailVerified')
- ? get(firebaseUser, 'emailVerified') // Firebase JS SDK
- : get(firebaseUser, 'email_verified'), // Firebase admin SDK
- }
-}
-
-/**
- * Create an object with an AuthUser object and AuthUserToken value.
- * @param {Object} firebaseUser - A decoded Firebase user token or JS SDK
- * Firebase user object.
- * @param {String} firebaseToken - A Firebase auth token string.
- * @return {Object|null} AuthUserInfo - The auth user info object.
- * @return {String} AuthUserInfo.AuthUser - An AuthUser object (see
- * `createAuthUser` above).
- * @return {String} AuthUserInfo.token - The user's encoded Firebase token.
- */
-export const createAuthUserInfo = ({
- firebaseUser = null,
- token = null,
-} = {}) => {
- return {
- AuthUser: createAuthUser(firebaseUser),
- token,
- }
-}
diff --git a/examples/with-firebase-authentication/utils/middleware/commonMiddleware.js b/examples/with-firebase-authentication/utils/middleware/commonMiddleware.js
deleted file mode 100644
index ad052d202776..000000000000
--- a/examples/with-firebase-authentication/utils/middleware/commonMiddleware.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import cookieSession from './cookieSession'
-import cookieSessionRefresh from './cookieSessionRefresh'
-
-export default function commonMiddleware(handler) {
- return cookieSession(cookieSessionRefresh(handler))
-}
diff --git a/examples/with-firebase-authentication/utils/middleware/cookieSession.js b/examples/with-firebase-authentication/utils/middleware/cookieSession.js
deleted file mode 100644
index eaac3d52aa71..000000000000
--- a/examples/with-firebase-authentication/utils/middleware/cookieSession.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import cookieSession from 'cookie-session'
-
-export const addSession = (req, res) => {
- // Ensure that session secrets are set.
- if (
- !(process.env.SESSION_SECRET_CURRENT && process.env.SESSION_SECRET_PREVIOUS)
- ) {
- throw new Error(
- 'Session secrets must be set as env vars `SESSION_SECRET_CURRENT` and `SESSION_SECRET_PREVIOUS`.'
- )
- }
-
- // An array is useful for rotating secrets without invalidating old sessions.
- // The first will be used to sign cookies, and the rest to validate them.
- // https://github.com/expressjs/cookie-session#keys
- const sessionSecrets = [
- process.env.SESSION_SECRET_CURRENT,
- process.env.SESSION_SECRET_PREVIOUS,
- ]
-
- // Example:
- // https://github.com/billymoon/micro-cookie-session
- const includeSession = cookieSession({
- keys: sessionSecrets,
- // TODO: set other options, such as "secure", "sameSite", etc.
- // https://github.com/expressjs/cookie-session#cookie-options
- maxAge: 604800000, // week
- httpOnly: true,
- overwrite: true,
- })
- includeSession(req, res, () => {})
-}
-
-export default function cookieSessionWrapper(handler) {
- return (req, res) => {
- try {
- addSession(req, res)
- } catch (e) {
- return res.status(500).json({ error: 'Could not get user session.' })
- }
- return handler(req, res)
- }
-}
diff --git a/examples/with-firebase-authentication/utils/middleware/cookieSessionRefresh.js b/examples/with-firebase-authentication/utils/middleware/cookieSessionRefresh.js
deleted file mode 100644
index 4958db3d3cf0..000000000000
--- a/examples/with-firebase-authentication/utils/middleware/cookieSessionRefresh.js
+++ /dev/null
@@ -1,11 +0,0 @@
-// Update a value in the cookie so that the set-cookie will be sent.
-// Only changes every minute so that it's not sent with every request.
-// https://github.com/expressjs/cookie-session#extending-the-session-expiration
-export default function cookieSessionRefresh(handler) {
- return (req, res) => {
- if (req.session) {
- req.session.nowInMinutes = Math.floor(Date.now() / 60e3)
- }
- handler(req, res)
- }
-}
diff --git a/examples/with-firebase-authentication/utils/pageWrappers/withAuthUser.js b/examples/with-firebase-authentication/utils/pageWrappers/withAuthUser.js
deleted file mode 100644
index 24454b6dea5e..000000000000
--- a/examples/with-firebase-authentication/utils/pageWrappers/withAuthUser.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/* eslint react/jsx-props-no-spreading: 0 */
-
-import React from 'react'
-import PropTypes from 'prop-types'
-import { get, set } from 'lodash/object'
-import { AuthUserInfoContext, useFirebaseAuth } from '../auth/hooks'
-import { createAuthUser, createAuthUserInfo } from '../auth/user'
-
-// Gets the authenticated user from the Firebase JS SDK, when client-side,
-// or from the request object, when server-side. Add the AuthUserInfo to
-// context.
-export default function withAuthUser(ComposedComponent) {
- const WithAuthUserComp = (props) => {
- const { AuthUserInfo, ...otherProps } = props
-
- // We'll use the authed user from client-side auth (Firebase JS SDK)
- // when available. On the server side, we'll use the authed user from
- // the session. This allows us to server-render while also using Firebase's
- // client-side auth functionality.
- const { user: firebaseUser } = useFirebaseAuth()
- const AuthUserFromClient = createAuthUser(firebaseUser)
- const { AuthUser: AuthUserFromSession, token } = AuthUserInfo
- const AuthUser = AuthUserFromClient || AuthUserFromSession || null
-
- return (
-
-
-
- )
- }
-
- WithAuthUserComp.getInitialProps = async (ctx) => {
- const { req, res } = ctx
-
- // Get the AuthUserInfo object.
- let AuthUserInfo
- if (typeof window === 'undefined') {
- // If server-side, get AuthUserInfo from the session in the request.
- // Don't include server middleware in the client JS bundle. See:
- // https://arunoda.me/blog/ssr-and-server-only-modules
- const { addSession } = require('../middleware/cookieSession')
- addSession(req, res)
- AuthUserInfo = createAuthUserInfo({
- firebaseUser: get(req, 'session.decodedToken', null),
- token: get(req, 'session.token', null),
- })
- } else {
- // If client-side, get AuthUserInfo from stored data. We store it
- // in _document.js. See:
- // https://github.com/vercel/next.js/issues/2252#issuecomment-353992669
- try {
- const jsonData = JSON.parse(
- window.document.getElementById('__MY_AUTH_USER_INFO').textContent
- )
- if (jsonData) {
- AuthUserInfo = jsonData
- } else {
- // Use the default (unauthed) user info if there's no data.
- AuthUserInfo = createAuthUserInfo()
- }
- } catch (e) {
- // If there's some error, use the default (unauthed) user info.
- AuthUserInfo = createAuthUserInfo()
- }
- }
-
- // Explicitly add the user to a custom prop in the getInitialProps
- // context for ease of use in child components.
- set(ctx, 'myCustomData.AuthUserInfo', AuthUserInfo)
-
- // Evaluate the composed component's getInitialProps().
- let composedInitialProps = {}
- if (ComposedComponent.getInitialProps) {
- composedInitialProps = await ComposedComponent.getInitialProps(ctx)
- }
-
- return {
- ...composedInitialProps,
- AuthUserInfo,
- }
- }
-
- WithAuthUserComp.displayName = `WithAuthUser(${ComposedComponent.displayName})`
-
- WithAuthUserComp.propTypes = {
- AuthUserInfo: PropTypes.shape({
- AuthUser: PropTypes.shape({
- id: PropTypes.string.isRequired,
- email: PropTypes.string.isRequired,
- emailVerified: PropTypes.bool.isRequired,
- }),
- token: PropTypes.string,
- }).isRequired,
- }
-
- WithAuthUserComp.defaultProps = {}
-
- return WithAuthUserComp
-}
diff --git a/examples/with-firebase-authentication/utils/pageWrappers/withAuthUserInfo.js b/examples/with-firebase-authentication/utils/pageWrappers/withAuthUserInfo.js
deleted file mode 100644
index d0d300e8c08d..000000000000
--- a/examples/with-firebase-authentication/utils/pageWrappers/withAuthUserInfo.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/* eslint react/jsx-props-no-spreading: 0 */
-
-import React from 'react'
-import PropTypes from 'prop-types'
-import { get } from 'lodash/object'
-import { AuthUserInfoContext } from '../auth/hooks'
-
-// Provides an AuthUserInfo prop to the composed component.
-export default function withAuthUserInfo(ComposedComponent) {
- const WithAuthUserInfoComp = (props) => {
- const { AuthUserInfo: AuthUserInfoFromSession, ...otherProps } = props
- return (
-
- {(AuthUserInfo) => (
-
- )}
-
- )
- }
-
- WithAuthUserInfoComp.getInitialProps = async (ctx) => {
- const AuthUserInfo = get(ctx, 'myCustomData.AuthUserInfo', null)
-
- // Evaluate the composed component's getInitialProps().
- let composedInitialProps = {}
- if (ComposedComponent.getInitialProps) {
- composedInitialProps = await ComposedComponent.getInitialProps(ctx)
- }
-
- return {
- ...composedInitialProps,
- AuthUserInfo,
- }
- }
-
- WithAuthUserInfoComp.displayName = `WithAuthUserInfo(${ComposedComponent.displayName})`
-
- WithAuthUserInfoComp.propTypes = {
- AuthUserInfo: PropTypes.shape({
- AuthUser: PropTypes.shape({
- id: PropTypes.string.isRequired,
- email: PropTypes.string.isRequired,
- emailVerified: PropTypes.bool.isRequired,
- }),
- token: PropTypes.string,
- }),
- }
-
- WithAuthUserInfoComp.defaultProps = {}
-
- return WithAuthUserInfoComp
-}