nitro-web 0.0.26 → 0.0.27

package/client/app.tsx

@@ -5,6 +5,7 @@ import { AxiosRequestConfig } from '@hokify/axios'
 import { beforeCreate, Provider, exposedData } from './store'
 import { axios, camelCase, pick, toArray, setTimeoutPromise } from 'nitro-web/util'
 import { Config, Store } from 'nitro-web/types'
+import { injectedConfig } from './index'
 
 type LayoutProps = {
   config: Config;
@@ -22,7 +23,7 @@ type Settings = {
 }
 
 type Route = {
-  component: React.FC<{ route?: Route; params?: object; location?: object }>
+  component: React.FC<{ route?: Route; params?: object; location?: object; config?: Config }>
   meta?: { title?: string }
   middleware: string[]
   name: string
@@ -41,6 +42,10 @@ export async function setupApp(config: Config, layouts: React.FC<LayoutProps>[])
     name: config.name,
     titleSeparator: config.titleSeparator,
   }
+
+  // Setup the jwt token
+  updateJwt(localStorage.getItem(injectedConfig.jwtName))
+
   if (!settings.layouts) throw new Error('layouts are required')
   const initData = (await settings.beforeApp(config)) || {}
   beforeCreate(initData, settings.beforeStoreUpdate)
@@ -49,6 +54,14 @@ export async function setupApp(config: Config, layouts: React.FC<LayoutProps>[])
   root.render(<App settings={settings} config={config} />)
 }
 
+export function updateJwt(token?: string | null) {
+  // Update the jwt token in local storage and axios headers
+  const key = injectedConfig.jwtName
+  localStorage.setItem(key, token || '')
+  if (token) axios().defaults.headers.Authorization = `Bearer ${token}`
+  else delete axios().defaults.headers.Authorization
+}
+
 function App({ settings, config }: { settings: Settings, config: Config }): ReactNode {
   // const themeNormalised = theme
   const router = getRouter({ settings, config })
@@ -182,7 +195,7 @@ function getRouter({ settings, config }: { settings: Settings, config: Config })
       children: layout.map((route) => {
         return {
           element: (
-            <RouteComponent route={route} />
+            <RouteComponent route={route} config={config} />
           ),
           path: route.path,
           loader: async () => { // request
@@ -230,13 +243,13 @@ function RestoreScroll() {
   return (null)
 }
 
-function RouteComponent({ route }: { route: Route }) {
+function RouteComponent({ route, config }: { route: Route, config: Config }) {
   const Component = route.component
   const params = useParams()
   const location = useLocation()
   document.title = route.meta?.title || ''
   return (
-    <Component route={route} params={params} location={location} />
+    <Component route={route} params={params} location={location} config={config} />
   )
 }
 
@@ -280,6 +293,13 @@ function beforeStoreUpdate(prevStore: Store | null, newData: Store) {
    * @return {object} store
    */
   if (!newData) return newData
+
+  // If newData.jwt is present, update the jwt token
+  if (newData.jwt) {
+    updateJwt(newData.jwt)
+    delete newData.jwt
+  }
+
   const store = {
     ...(prevStore || {
       message: undefined,
@@ -288,9 +308,8 @@ function beforeStoreUpdate(prevStore: Store | null, newData: Store) {
     ...(newData || {}),
   }
 
-  // Used to verify if the current cookie belongs to this user
-  // E.g. signout > signin (to a different user on another tab)
-  axios().defaults.headers.userid = store?.user?._id
+  // E.g. Cookie matching handy for rare issues, e.g. signout > signin (to a different user on another tab)
+  axios().defaults.headers.authid = store?.user?._id
   return store
 }
 

package/client/index.ts

@@ -48,5 +48,5 @@ export { Toggle } from '../components/partials/form/toggle'
 // Component Other
 export { IsFirstRender } from '../components/partials/is-first-render'
 
-// IsDemo environment variable
-export const isDemo = ISDEMO
+// Expose the injected config
+export const injectedConfig = { ...INJECTED_CONFIG } as import('types').Config

package/client/store.ts

@@ -1,7 +1,6 @@
 import { createContainer } from 'react-tracked'
 import { Store } from 'nitro-web/types'
 
-
 export type BeforeUpdate = (prevStore: Store | null, newData: Store) => Store
 
 let initData: Store

package/components/auth/auth.api.js

@@ -1,15 +1,15 @@
 // @ts-nocheck
-import MongoStore from 'connect-mongo'
 import crypto from 'crypto'
-import expressSession from 'express-session'
 import passport from 'passport'
 import passportLocal from 'passport-local'
+import { Strategy as JwtStrategy, ExtractJwt } from 'passport-jwt'
 import db from 'monastery'
+import jsonwebtoken from 'jsonwebtoken'
 import { sendEmail } from 'nitro-web/server'
 import * as util from 'nitro-web/util'
-// import stripeController from '../billing/stripe.api.js'
 
 let config = {}
+const JWT_SECRET = process.env.JWT_SECRET || 'replace_this_with_secure_env_secret'
 
 export default {
 
@@ -24,43 +24,19 @@ export default {
   },
 
   setup: function (middleware, _config) {
-    // Setup passport handlers for reading and writing to req.session
     const that = this
     global.passport = passport
 
     // Set config values
-    config = {
-      env: _config.env,
-      masterPassword: _config.masterPassword,
-    }
-    for (let key in config) {
-      if (!config[key] && key != 'masterPassword') {
-        throw new Error(`Missing config value for stripe.api.js: ${key}`)
-      }
-    }
-
-    // After successful login, serialize the user into a session object
-    passport.serializeUser((user, next) => {
-      next(null, { _id: user._id })
-    })
+    config = { env: _config.env, masterPassword: _config.masterPassword }
+    if (!config.env) throw new Error('Missing config value for: config.env')
 
-    // After session read, get the user from the session object
-    passport.deserializeUser(async (sessionObject, next) => {
-      try {
-        const user = await that._findUserFromProvider('deserialize', sessionObject)
-        next(null, user)
-      } catch (err) {
-        next(err.message)
-      }
-    })
-    
-    // Setup passport local signin strategy
     passport.use(
       new passportLocal.Strategy(
-        { usernameField: 'email' }, 
+        { usernameField: 'email' },
         async (email, password, next) => {
           try {
-            const user = await that._findUserFromProvider('email', { email: email, password: password })
+            const user = await that._findUserFromProvider('email', { email, password })
             next(null, user)
           } catch (err) {
             next(err.message)
@@ -69,58 +45,45 @@ export default {
       )
     )
 
-    // https://medium.com/swlh/everything-you-need-to-know-about-the-passport-jwt-passport-js-strategy-8b69f39014b0
-    // https://github.com/mikenicholson/passport-jwt
-    //
-    //   passport.use(new JwtStrategy.Strategy({
-    //     jwtFromRequest: JwtStrategy.ExtractJwt.fromAuthHeaderAsBearerToken(),
-    //     secretOrKey: '1fjw3h3jkdJD8sjA12dw53llapA2sjAjsv3nxaxzNBzz',
-    //   }, function(jwtPayload, done) {
-    //
-    //     this._findUserFromProvider('email', { email: email, password: password }, done)
-    //     console.log(jwtPayload)
-    //       User.findOne({id: jwt_payload.sub}, function(err, user) {
-    //           if (err) {
-    //               return done(err, false);
-    //           }
-    //           if (user) {
-    //               return done(null, user);
-    //           } else {
-    //               return done(null, false);
-    //               // or you could create a new account
-    //           }
-    //       });
-    //   }));
-
-    // Add session middleware
-    middleware.order.splice(3, 0, 'session', 'passport', 'passportSession', 'passportError', 'blocked')
+    passport.use(
+      new JwtStrategy(
+        {
+          jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
+          secretOrKey: JWT_SECRET,
+        },
+        async (payload, done) => {
+          try {
+            const user = await that._findUserFromProvider('deserialize', { _id: payload._id })
+            if (!user) return done(null, false)
+            return done(null, user)
+          } catch (err) {
+            return done(err, false)
+          }
+        }
+      )
+    )
+
+    middleware.order.splice(3, 0, 'passport', 'passportError', 'jwtAuth', 'blocked')
+
     Object.assign(middleware, {
       blocked: function (req, res, next) {
         if (req.user && req.user.loginActive === false) {
-          req.logout()
-          res.error('This user is not available.')
+          res.status(403).error('This user is not available.')
         } else {
           next()
         }
       },
+      jwtAuth: function(req, res, next) {
+        passport.authenticate('jwt', { session: false }, function(err, user) {
+          if (user) req.user = user
+          next()
+        })(req, res, next)
+      },
       passport: passport.initialize(),
       passportError: function (err, req, res, next) {
         if (!err) return next()
-        req.logout()
         res.error(err)
       },
-      passportSession: passport.session(),
-      session: expressSession({
-        secret: '092720e5ffc1237266b8517239cd81b6', // Changing invalidates cookies
-        cookie: { maxAge: 7 * 24 * 60 * 60 * 1000  },
-        resave: false,
-        saveUninitialized: false,
-        store: MongoStore.create({
-          clientPromise: db.onOpen((manager) => {
-            return manager.client 
-          }),
-        }),
-      }),
     })
   },
 
@@ -131,31 +94,26 @@ export default {
   signup: async function (req, res) {
     try {
       let user = await this._userCreate(req.body)
-      // Welcome email
       sendEmail({
         config: config,
         template: 'welcome',
         to: `${util.ucFirst(user.firstName)}<${user.email}>`,
-      }).catch(err => {
-        console.error(err)
-      })
-      // Login
-      res.send(await this._signinAndGetState(req, user))
+      }).catch(console.error)
+      res.send(await this._signinAndGetState(user, req.query.desktop))
     } catch (err) {
       res.error(err)
     }
   },
 
   signin: function (req, res) {
-    // console.log('api: signin')
-    // console.log(req.body)
     if (!req.body.email) return res.error('email', 'The email you entered is incorrect.')
     if (!req.body.password) return res.error('password', 'The password you entered is incorrect.')
+
     passport.authenticate('local', { session: false }, async (err, user, info) => {
-      if (err) return console.log(err) || res.error(err)
+      if (err) return res.error(err)
       if (!user && info) return res.error('email', info.message)
       try {
-        const response = await this._signinAndGetState(req, user)
+        const response = await this._signinAndGetState(user, req.query.desktop)
         res.send(response)
       } catch (err) {
         res.error(err)
@@ -164,35 +122,29 @@ export default {
   },
 
   signout: function (req, res) {
-    req.logout()
     res.json('{}')
   },
 
   resetInstructions: async function (req, res) {
     try {
-      let email = (req.body.email||'').trim().toLowerCase()
-      if (!email || !util.isString(email)) {
-        throw { title: 'email', detail: 'The email you entered is incorrect.' }
-      }
-      // Find matching user and create new reset token
-      let user = await db.user.findOne({ query: { email: email }, _privateData: true })
+      let email = (req.body.email || '').trim().toLowerCase()
+      if (!email || !util.isString(email)) throw { title: 'email', detail: 'The email you entered is incorrect.' }
+
+      let user = await db.user.findOne({ query: { email }, _privateData: true })
       if (!user) throw { title: 'email', detail: 'The email you entered is incorrect.' }
-      // Create token
-      let token = await this._tokenCreate(user._id)
-      // Update user with token
-      await db.user.update({ query: { email: email }, $set: { resetToken: token }})
-      // Email.
+
+      let resetToken = await this._tokenCreate(user._id)
+      await db.user.update({ query: { email }, $set: { resetToken }})
+
       res.json({})
       sendEmail({
         config: config,
         template: 'reset-password',
         to: `${util.ucFirst(user.firstName)}<${email}>`,
         data: {
-          token: token + (req.query.hasOwnProperty('desktop') ? '?desktop' : ''),
+          token: resetToken + (req.query.hasOwnProperty('desktop') ? '?desktop' : ''),
         },
-      }).catch(err => {
-        console.error('sendEmail(..) mailgun error', err)
-      })
+      }).catch(err => console.error('sendEmail(..) mailgun error', err))
     } catch (err) {
       res.error(err)
     }
@@ -202,18 +154,11 @@ export default {
     try {
       const { token, password, password2 } = req.body
       const id = this._tokenParse(token)
-      // Validate password
       this._validatePassword(password, password2)
-      // Find matching user
-      let user = await db.user.findOne({
-        query: id,
-        blacklist: ['-resetToken'],
-        _privateData: true,
-      })
-      if (!user || user.resetToken !== token) {
-        throw new Error('Sorry your email token is invalid or has already been used verify your email.')
-      }
-      // Update user with new password
+
+      let user = await db.user.findOne({ query: id, blacklist: ['-resetToken'], _privateData: true })
+      if (!user || user.resetToken !== token) throw new Error('Sorry your email token is invalid or has already been used.')
+
       await db.user.update({
         query: user._id,
         data: {
@@ -222,7 +167,7 @@ export default {
         },
         blacklist: ['-resetToken', '-password'],
       })
-      res.send(await this._signinAndGetState(req, { ...user, resetToken: undefined }))
+      res.send(await this._signinAndGetState({ ...user, resetToken: undefined }, req.query.desktop))
     } catch (err) {
       res.error(err)
     }
@@ -264,27 +209,19 @@ export default {
   /* ---- Private fns ---------------- */
 
   _getState: async function (user) {
-    // Format the initial state
-    return { 
+    // Initial state
+    return {
       user: user || null,
-      // stripeProducts: await stripeController._getProducts(),
     }
   },
 
-  _signinAndGetState: function (req, user) {
-    // @return state
-    return new Promise((resolve, reject) => {
-      user.desktop = req.query.hasOwnProperty('desktop')
-      if (user.loginActive !== false) {
-        req.login(user, async (err) => {
-          if (err) return reject(err)
-          resolve(await this._getState(user))
-        })
-      } else {
-        return reject('This user is not available.')
-        // this._getState().then((state) => resolve(state))
-      }
-    })
+  _signinAndGetState: async function (user, isDesktop) {
+    if (user.loginActive === false) throw 'This user is not available.'
+    user.desktop = isDesktop
+
+    const jwt = jsonwebtoken.sign({ _id: user._id }, JWT_SECRET, { expiresIn: '30d' })
+    const state = await this._getState(user)
+    return { ...state, jwt }
   },
 
   _tokenCreate: function (id) {

package/components/auth/signin.tsx

@@ -1,15 +1,15 @@
-import { Topbar, Field, Button, FormError, util } from 'nitro-web'
-import { Config, Errors } from 'nitro-web/types'
+import { Topbar, Field, Button, FormError, util, injectedConfig, updateJwt } from 'nitro-web'
+import { Errors } from 'nitro-web/types'
 
-export function Signin({ config }: { config: Config }) {
+export function Signin() {
   const navigate = useNavigate()
   const location = useLocation()
   const isSignout = location.pathname == '/signout'
   const isLoading = useState(isSignout ? 'is-loading' : '')
   const [, setStore] = useTracked()
   const [state, setState] = useState({
-    email: config.env == 'development' ? config.placeholderEmail : '',
-    password: config.env == 'development' ? '1234' : '',
+    email: injectedConfig.env == 'development' ? (injectedConfig.placeholderEmail || '') : '',
+    password: injectedConfig.env == 'development' ? '1234' : '',
     errors: [] as Errors,
   })
 
@@ -22,8 +22,10 @@ export function Signin({ config }: { config: Config }) {
   useEffect(() => {
     if (isSignout) {
       setStore(() => ({ user: null }))
-      util.axios().get('/api/signout')
+      // util.axios().get('/api/signout')
+      Promise.resolve()
         .then(() => isLoading[1](''))
+        .then(() => updateJwt())
         .then(() => navigate({ pathname: '/signin', search: location.search }, { replace: true }))
         .catch(err => (console.error(err), isLoading[1]('')))
     }

package/components/auth/signup.tsx

@@ -1,15 +1,15 @@
-import { Button, Field, FormError, Topbar, util } from 'nitro-web'
-import { Config, Errors } from 'nitro-web/types'
+import { Button, Field, FormError, Topbar, util, injectedConfig } from 'nitro-web'
+import { Errors } from 'nitro-web/types'
 
-export function Signup({ config }: { config: Config}) {
+export function Signup() {
   const navigate = useNavigate()
   const isLoading = useState('')
   const [, setStore] = useTracked()
   const [state, setState] = useState({
-    email: config.env === 'development' ? config.placeholderEmail : '',
-    name: config.env === 'development' ? 'Bruce Wayne' : '',
-    business: { name: config.env === 'development' ? 'Wayne Enterprises' : '' },
-    password: config.env === 'development' ? '1234' : '',
+    email: injectedConfig.env === 'development' ? (injectedConfig.placeholderEmail || '') : '',
+    name: injectedConfig.env === 'development' ? 'Bruce Wayne' : '',
+    business: { name: injectedConfig.env === 'development' ? 'Wayne Enterprises' : '' },
+    password: injectedConfig.env === 'development' ? '1234' : '',
     errors: [] as Errors,
   })
 

package/components/partials/element/sidebar.tsx

@@ -1,7 +1,7 @@
 // Component: https://tailwindui.com/components/application-ui/application-shells/sidebar#component-a69d85b6237ea2ad506c00ef1cd39a38
 import { Dialog, DialogBackdrop, DialogPanel, TransitionChild } from '@headlessui/react'
 import avatarImg from 'nitro-web/client/imgs/avatar.jpg'
-import { isDemo } from 'nitro-web'
+import { injectedConfig } from 'nitro-web'
 import {
   Bars3Icon,
   HomeIcon,
@@ -85,7 +85,7 @@ function SidebarContents ({ Logo, menu, links, version }: SidebarProps) {
 
   const _menu = menu || [
     { name: 'Dashboard', to: '/', Icon: HomeIcon },
-    { name: isDemo ? 'Design System' : 'Style Guide', to: '/styleguide', Icon: PaintBrushIcon }, 
+    { name: injectedConfig.isDemo ? 'Design System' : 'Style Guide', to: '/styleguide', Icon: PaintBrushIcon }, 
     { name: 'Pricing', to: '/pricing', Icon: UsersIcon },
     { name: 'Signout', to: '/signout', Icon: ArrowLeftCircleIcon },
   ]

package/components/partials/styleguide.tsx

@@ -1,4 +1,4 @@
-import { Drop, Dropdown, Field, Select, Button, Checkbox, GithubLink, isDemo, Modal, Calendar } from 'nitro-web'
+import { Drop, Dropdown, Field, Select, Button, Checkbox, GithubLink, Modal, Calendar, injectedConfig } from 'nitro-web'
 import { getCountryOptions, getCurrencyOptions, ucFirst } from 'nitro-web/util'
 import { CheckIcon } from '@heroicons/react/20/solid'
 import { Config } from 'nitro-web/types'
@@ -55,7 +55,7 @@ export function Styleguide({ config }: { config: Config }) {
     <div class="mb-10 text-left max-w-[1100px]">
       <GithubLink filename={__filename} />
       <div class="mb-7">
-        <h1 class="h1">{isDemo ? 'Design System' : 'Style Guide'}</h1>
+        <h1 class="h1">{injectedConfig.isDemo ? 'Design System' : 'Style Guide'}</h1>
         <p>
           Components are styled using&nbsp;
           <a href="https://v3.tailwindcss.com/docs/configuration" class="underline" target="_blank" rel="noreferrer">TailwindCSS</a>. 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "repository": "github:boycce/nitro-web",
   "homepage": "https://boycce.github.io/nitro-web/",
   "description": "Nitro is a battle-tested, modular base project to turbocharge your projects, styled using Tailwind 🚀",
@@ -33,18 +33,18 @@
     "bcrypt": "^5.0.0",
     "body-parser": "^1.19.0",
     "compression": "^1.7.4",
-    "connect-mongo": "^5.1.0",
     "date-fns": "^3.6.0",
     "dateformat": "^3.0.3",
     "dotenv": "^14.3.2",
     "express": "^4.17.1",
     "express-fileupload": "^1.1.6",
-    "express-session": "^1.17.0",
     "inline-css": "^4.0.2",
+    "jsonwebtoken": "^9.0.2",
     "nodemailer": "^6.5.0",
     "nodemailer-mailgun-transport": "^2.0.2",
     "nunjucks": "^3.2.2",
     "passport": "^0.4.1",
+    "passport-jwt": "^4.0.1",
     "passport-local": "^1.0.0",
     "sort-route-addresses-nodeps": "0.0.4"
   },

package/types/required-globals.d.ts

@@ -7,7 +7,6 @@ import { CSSInterpolation } from '@emotion/serialize'
 declare global {
   /** Webpack injected config variables */
   const INJECTED_CONFIG: Record<string, string|boolean|object>
-  const ISDEMO: boolean
   /** Webpack svg loader */
   module '*.svg' {
     const content: React.FC<React.SVGProps<SVGElement>>

package/types.ts

@@ -1,21 +1,25 @@
-// Expected config to be available
-export type Config = {
+type InjectedConfig = {
+  awsUrl?: string
   clientUrl: string
   countries: { [key: string]: { numberFormats: { currency: string } } } // for input-currency.tsx
   currencies: { [key: string]: { symbol: string, digits: number } } // for input-currency.tsx
   env: string
+  googleMapsApiKey?: string
+  isDemo: boolean // implicitly defined by webpack
+  isStatic: boolean // implicitly defined by webpack
+  jwtName: string // implicitly defined by webpack
   name: string
+  placeholderEmail?: string
+  stripePublishableKey?: string
+  titleSeparator?: string
   version: string
+}
 
-  awsUrl?: string
+export type Config = InjectedConfig & {
+  // Non-injectable config on the client
   beforeApp?: () => Promise<object>
   beforeStoreUpdate?: (prevStore: Store | null, newData: Store) => Store
-  googleMapsApiKey?: string
-  isStatic?: boolean
   middleware?: Record<string, (route: unknown, store: Store) => undefined | { redirect: string }>
-  placeholderEmail?: string
-  stripePublishableKey?: string
-  titleSeparator?: string
 }
 
 export type User = {
@@ -45,6 +49,7 @@ export type Store = {
   message?: MessageObject | string | null
   user?: User | null,
   apiAvailable?: boolean
+  jwt?: string
 }
 
 export type Svg = React.FC<React.SVGProps<SVGElement>>