nitro-web 0.0.26 → 0.0.28

package/client/app.tsx

@@ -2,10 +2,14 @@ import { createBrowserRouter, createHashRouter, redirect, useParams, RouterProvi
 import { Fragment, ReactNode } from 'react'
 import ReactDOM from 'react-dom/client'
 import { AxiosRequestConfig } from '@hokify/axios'
-import { beforeCreate, Provider, exposedData } from './store'
 import { axios, camelCase, pick, toArray, setTimeoutPromise } from 'nitro-web/util'
+import { injectedConfig, preloadedStoreData, exposedStoreData } from './index'
 import { Config, Store } from 'nitro-web/types'
 
+type StoreContainer = { 
+  Provider: React.FC<{ children: ReactNode }> 
+}
+
 type LayoutProps = {
   config: Config;
 }
@@ -13,7 +17,7 @@ type LayoutProps = {
 type Settings = {
   afterApp?: () => void
   beforeApp: (config: Config) => Promise<object>
-  beforeStoreUpdate: (prevStore: Store | null, newData: Store) => Store
+  // beforeStoreUpdate: (prevStore: Store | null, newData: Store) => Store
   isStatic?: boolean
   layouts: React.FC<LayoutProps>[]
   middleware: Record<string, (route: unknown, store: Store) => undefined | { redirect: string }>
@@ -22,7 +26,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
@@ -30,26 +34,39 @@ type Route = {
   redirect?: string
 }
 
-export async function setupApp(config: Config, layouts: React.FC<LayoutProps>[]) {
+export async function setupApp(config: Config, storeContainer: StoreContainer, layouts: React.FC<LayoutProps>[]) {
+  if (!layouts) throw new Error('layouts are required')
   // Fetch state and init app
   const settings: Settings = {
     beforeApp: config.beforeApp || beforeApp,
-    beforeStoreUpdate: config.beforeStoreUpdate || beforeStoreUpdate,
     isStatic: config.isStatic,
     layouts: layouts,
     middleware: Object.assign(defaultMiddleware, config.middleware || {}),
     name: config.name,
     titleSeparator: config.titleSeparator,
   }
-  if (!settings.layouts) throw new Error('layouts are required')
-  const initData = (await settings.beforeApp(config)) || {}
-  beforeCreate(initData, settings.beforeStoreUpdate)
+
+  // Setup the jwt token
+  updateJwt(localStorage.getItem(injectedConfig.jwtName))
+
+  // Fetch the store/state
+  const data = (await settings.beforeApp(config)) || {}
+  // Make the store data available to the store
+  Object.assign(preloadedStoreData, data)
 
   const root = ReactDOM.createRoot(document.getElementById('app') as HTMLElement)
-  root.render(<App settings={settings} config={config} />)
+  root.render(<App settings={settings} config={config} storeContainer={storeContainer} />)
+}
+
+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 {
+function App({ settings, config, storeContainer }: { settings: Settings, config: Config, storeContainer: StoreContainer }): ReactNode {
   // const themeNormalised = theme
   const router = getRouter({ settings, config })
   // const theme = pick(themeNormalised, []) // e.g. 'topPanelHeight'
@@ -76,12 +93,12 @@ function App({ settings, config }: { settings: Settings, config: Config }): Reac
   }, [!!router])
 
   return (
-    <Provider>
+    <storeContainer.Provider>
       {/* <ThemeProvider theme={themeNormalised}> */}
         { router && <RouterProvider router={router} /> }
         <AfterApp settings={settings} />
       {/* </ThemeProvider> */}
-    </Provider>
+    </storeContainer.Provider>
   )
 }
 
@@ -182,14 +199,14 @@ 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
-            // wait for container/exposedData to be setup
+            // wait for container/exposedStoreData to be setup
             if (!nonce) nonce = true && await setTimeoutPromise(() => {}, 0) // eslint-disable-line
             for (const key of route.middleware) {
-              const error = settings.middleware[key](route, exposedData || {})
+              const error = settings.middleware[key](route, exposedStoreData || {})
               if (error && error.redirect) {
                 return redirect(error.redirect)
               }
@@ -230,13 +247,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} />
   )
 }
 
@@ -261,7 +278,7 @@ async function beforeApp(config: Config) {
     //   sharedStoreCache = window.prehot.sharedStoreCache
     //   delete window.prehot
     // }
-    if (!exposedData && !config.isStatic) {
+    if (!config.isStatic) {
       stateData = (await axios().get('/api/state', { 'axios-retry': { retries: 3 }, timeout: 4000 } as AxiosRequestConfig)).data
       apiAvailable = true
     }
@@ -269,29 +286,7 @@ async function beforeApp(config: Config) {
     console.error('We had trouble connecting to the API, please refresh')
     console.log(err)
   }
-  return { ...(stateData || exposedData), apiAvailable }
-}
-
-function beforeStoreUpdate(prevStore: Store | null, newData: Store) {
-  /**
-   * Get store object (called on signup/signin/signout/state)
-   * @param {object} store - existing store
-   * @param {object} <newStoreData> - pass to override store with /login or /state request data
-   * @return {object} store
-   */
-  if (!newData) return newData
-  const store = {
-    ...(prevStore || {
-      message: undefined,
-      user: undefined, // defined if user is signed in
-    }),
-    ...(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
-  return store
+  return { ...stateData, apiAvailable }
 }
 
 const defaultMiddleware = {

package/client/globals.ts

@@ -1,13 +1,10 @@
 import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
 import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'
 import { onChange } from 'nitro-web'
-import { useTracked } from './store'
 
 declare global {
   // Common application globals
   const onChange: typeof import('nitro-web').onChange
-  /** Global shared store, a react-tracked container initialized in `setupApp()` */
-  let useTracked: typeof import('./store').useTracked
 
   // Common aependency globals
   /** The public API for rendering a history-aware `<a>`. */
@@ -26,8 +23,6 @@ declare global {
 Object.assign(window, {
   // application globals
   onChange: onChange,
-  useTracked: useTracked,
-
   // dependency globals
   Link: Link,
   useCallback: useCallback,

package/client/index.ts

@@ -2,9 +2,14 @@
 import '../types/required-globals.d.ts'
 
 // export const pi = parseFloat(3.142)
-export * from './app'
+// Utility functions
 export * from '../util.js'
 export * as util from '../util.js'
+export * from '../types'
+
+// Main app functions
+export { setupApp, updateJwt } from './app'
+export { createStore, exposedStoreData, preloadedStoreData, setStoreWrapper } from './store'
 
 // Component Pages
 export { Signin } from '../components/auth/signin'
@@ -48,5 +53,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,31 +1,45 @@
 import { createContainer } from 'react-tracked'
+import { Dispatch, SetStateAction } from 'react'
+import { axios, isObject } from 'nitro-web/util'
+import { updateJwt } from 'nitro-web'
 import { Store } from 'nitro-web/types'
 
+export let preloadedStoreData: Store
+export let exposedStoreData: Store
 
-export type BeforeUpdate = (prevStore: Store | null, newData: Store) => Store
+export function createStore<T extends Store>(store: T) {
+  const container = createContainer(() => {
+    // const [state, setState] = useState<T>(() => (initData || store || {}) as T)
+    const [state, setState] = useState<T>(() => beforeUpdate((preloadedStoreData || store || {}) as T))
+    exposedStoreData = state
+    return [state, setStoreWrapper(setState)]
+  })
+  return container
+}
 
-let initData: Store
-let beforeUpdate: BeforeUpdate = (prevStore, newData) => newData
+export function setStoreWrapper<T extends Store>(setState: Dispatch<SetStateAction<T>>, _beforeUpdate?: (newStore: T) => T) {
+  _beforeUpdate = _beforeUpdate || beforeUpdate
+  return (updater: SetStateAction<T>) => {
+    if (typeof updater === 'function') setState((prev: T) => beforeUpdate(updater(prev)))
+    else setState(() => beforeUpdate(updater))
+  }
+}
 
-const container = createContainer(() => {
-  const [store, setStore] = useState(() => beforeUpdate(null, initData || exposedData || {}))
+function beforeUpdate<T extends Store>(newStore: T) {
+  /**
+   * Get store object (called on signup/signin/signout/state)
+   * @param {object} <newData> - pass to override store with /login or /state request data
+   * @return {object} store
+   */
+  if (!newStore || !isObject(newStore)) return newStore
 
-  // Wrap the setState function to always run beforeUpdate
-  const wrappedSetStore = (updater: (prevStore: Store) => Store) => {
-    if (typeof updater === 'function') {
-      setStore((prevStore: Store) => beforeUpdate(prevStore, updater(prevStore)))
-    } else {
-      setStore((prevStore: Store) => beforeUpdate(prevStore, updater))
-    }
+  // If newData.jwt is present, update the jwt token
+  if (newStore?.jwt) {
+    updateJwt(newStore.jwt)
+    delete newStore.jwt
   }
 
-  exposedData = store
-  return [store, wrappedSetStore]
-})
-
-export let exposedData: Store
-export const { Provider, useTracked } = container
-export function beforeCreate(_initData: Store, _beforeUpdate: BeforeUpdate) {
-  initData = _initData // normally provided from a /login or /state request data
-  beforeUpdate = _beforeUpdate
+  // E.g. Cookie matching handy for rare issues, e.g. signout > signin (to a different user on another tab)
+  axios().defaults.headers.authid = newStore?.user?._id
+  return newStore
 }

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/reset.tsx

@@ -3,13 +3,13 @@ import { Errors } from 'nitro-web/types'
 
 export function ResetInstructions() {
   const navigate = useNavigate()
-  const isLoading = useState('')
+  const isLoading = useState()
   const [, setStore] = useTracked()
   const [state, setState] = useState({ email: '', errors: [] as Errors })
 
   async function onSubmit (event: React.FormEvent<HTMLFormElement>) {
     try {
-      await util.request(event, 'post /api/reset-instructions', state, isLoading)
+      await util.request('post /api/reset-instructions', state, event, isLoading)
       setStore(s => ({ ...s, message: 'Done! Please check your email.' }))
       navigate('/signin')
     } catch (e) {
@@ -32,7 +32,7 @@ export function ResetInstructions() {
           <FormError state={state} className="pt-2" />
         </div>
 
-        <Button className="w-full" isLoading={!!isLoading[0]} type="submit">Email me a reset password link</Button>
+        <Button className="w-full" isLoading={isLoading[0]} type="submit">Email me a reset password link</Button>
       </form>
     </div>
   )
@@ -41,7 +41,7 @@ export function ResetInstructions() {
 export function ResetPassword() {
   const navigate = useNavigate()
   const params = useParams()
-  const isLoading = useState('')
+  const isLoading = useState()
   const [, setStore] = useTracked()
   const [state, setState] = useState(() => ({
     password: '',
@@ -52,7 +52,7 @@ export function ResetPassword() {
 
   async function onSubmit (event: React.FormEvent<HTMLFormElement>) {
     try {
-      const data = await util.request(event, 'post /api/reset-password', state, isLoading)
+      const data = await util.request('post /api/reset-password', state, event, isLoading)
       setStore(() => data)
       navigate('/')
     } catch (e) {
@@ -79,7 +79,7 @@ export function ResetPassword() {
           <FormError state={state} className="pt-2" />
         </div>
 
-        <Button class="w-full" isLoading={!!isLoading[0]} type="submit">Reset Password</Button>
+        <Button class="w-full" isLoading={isLoading[0]} type="submit">Reset Password</Button>
       </form>
     </div>
   )

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 isLoading = useState(isSignout)
   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,17 +22,19 @@ export function Signin({ config }: { config: Config }) {
   useEffect(() => {
     if (isSignout) {
       setStore(() => ({ user: null }))
-      util.axios().get('/api/signout')
-        .then(() => isLoading[1](''))
+      // util.axios().get('/api/signout')
+      Promise.resolve()
+        .then(() => isLoading[1](false))
+        .then(() => updateJwt())
         .then(() => navigate({ pathname: '/signin', search: location.search }, { replace: true }))
-        .catch(err => (console.error(err), isLoading[1]('')))
+        .catch(err => (console.error(err), isLoading[1](false)))
     }
   }, [isSignout])
 
   async function onSubmit (e: React.FormEvent<HTMLFormElement>) {
     try {
-      const data = await util.request(e, 'post /api/signin', state, isLoading)
-      isLoading[1]('is-loading')
+      const data = await util.request('post /api/signin', state, e, isLoading)
+      isLoading[1](true)
       setStore(() => data)
       setTimeout(() => { // wait for setStore
         if (location.search.includes('redirect')) navigate(location.search.replace('?redirect=', ''))
@@ -65,7 +67,7 @@ export function Signin({ config }: { config: Config }) {
           <FormError state={state} className="pt-2" />
         </div>
 
-        <Button class="w-full" isLoading={!!isLoading[0]} type="submit">Sign In</Button>
+        <Button class="w-full" isLoading={isLoading[0]} type="submit">Sign In</Button>
       </form>
     </div>
   )

package/components/auth/signup.tsx

@@ -1,22 +1,22 @@
-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 isLoading = useState(false)
   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,
   })
 
   async function onSubmit (e: React.FormEvent<HTMLFormElement>) {
     try {
-      const data = await util.request(e, 'post /api/signup', state, isLoading)
-      isLoading[1]('is-loading')
+      const data = await util.request('post /api/signup', state, e, isLoading)
+      isLoading[1](true)
       setStore(() => data)
       setTimeout(() => navigate('/'), 0) // wait for setStore
     } catch (e) {
@@ -53,7 +53,7 @@ export function Signup({ config }: { config: Config}) {
           <FormError state={state} className="pt-2" />
         </div>
 
-        <Button class="w-full" isLoading={!!isLoading[0]} type="submit">Create Account</Button>
+        <Button class="w-full" isLoading={isLoading[0]} type="submit">Create Account</Button>
       </form>
     </div>
   )

package/components/partials/element/button.tsx

@@ -1,27 +1,43 @@
 import { twMerge } from 'tailwind-merge'
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/20/solid'
 
-type Props = {
-  color?: 'primary'|'secondary'|'white'
+type Button = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  color?: 'primary'|'secondary'|'black'|'white'
   size?: 'xs'|'sm'|'md'|'lg'
   className?: string
   isLoading?: boolean
   IconLeft?: React.ReactNode|'v'
+  IconLeftEnd?: React.ReactNode|'v'
   IconRight?: React.ReactNode|'v'
-  IconRight2?: React.ReactNode|'v'
+  IconRightEnd?: React.ReactNode|'v'
   children?: React.ReactNode|'v'
-  [key: string]: unknown
 }
 
-export function Button({ color='primary', size='md', className, isLoading, IconLeft, IconRight, IconRight2, children, ...props }: Props) {
+export function Button({ 
+  size='md', 
+  color='primary',
+  className, 
+  isLoading, 
+  IconLeft, 
+  IconLeftEnd, 
+  IconRight, 
+  IconRightEnd, 
+  children, 
+  ...props 
+}: Button) {
   // const size = (color.match(/xs|sm|md|lg/)?.[0] || 'md') as 'xs'|'sm'|'md'|'lg'
-  const iconPosition = IconLeft ? 'left' : IconRight ? 'right' : IconRight2 ? 'right2' : 'none'
-  const base = 'relative inline-block font-medium shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2'
+  const iconPosition = IconLeft ? 'left' : IconLeftEnd ? 'leftEnd' : IconRight ? 'right' : IconRightEnd ? 'rightEnd' : 'none'
+  const base = 
+    'relative inline-block text-center font-medium shadow-sm focus-visible:outline focus-visible:outline-2 ' +
+    'focus-visible:outline-offset-2 text-white'
 
-  // Button types
-  const primary = 'bg-primary text-white shadow-sm hover:bg-primary-hover focus-visible:outline-primary'
-  const secondary = 'bg-secondary text-white shadow-sm hover:bg-secondary-hover focus-visible:outline-secondary'
-  const white = 'bg-white text-gray-900 ring-1 ring-inset ring-gray-300 shadow-sm hover:bg-gray-50'
+  // Button colors, you can use custom colors by using className instead
+  const colors = {
+    primary: 'bg-primary hover:bg-primary-hover',
+    secondary: 'bg-secondary hover:bg-secondary-hover',
+    black: 'bg-black hover:bg-gray-700',
+    white: 'bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 [&>.loader]:border-black',
+  }
 
   // Button sizes
   const sizes = {
@@ -31,20 +47,7 @@ export function Button({ color='primary', size='md', className, isLoading, IconL
     lg: 'px-3.5 py-2.5 text-sm rounded-md',
   }
 
-  // Icon position
-  const contentLayouts = {
-    left: 'w-full inline-flex items-center gap-x-1.5',
-    right: 'w-full inline-flex items-center gap-x-1.5',
-    right2: 'w-full inline-flex items-center justify-between gap-x-1.5',
-    none: 'w-full gap-x-1.5',
-  }
-
-  let colorAndSize = ''
-  if (color.match(/primary/)) colorAndSize = `${primary} ${sizes[size]}`
-  else if (color.match(/secondary/)) colorAndSize = `${secondary} ${sizes[size]}`
-  else if (color.match(/white/)) colorAndSize = `${white} ${sizes[size]}`
-
-  const contentLayout = `${contentLayouts[iconPosition]}`
+  const contentLayout = `w-full gap-x-1.5 ${iconPosition == 'none' ? '' : 'inline-flex items-center justify-center'}`
   const loading = isLoading ? '[&>*]:opacity-0 text-opacity-0' : ''
 
   function getIcon(Icon: React.ReactNode | 'v') {
@@ -54,16 +57,18 @@ export function Button({ color='primary', size='md', className, isLoading, IconL
   }
   
   return (
-    <button class={twMerge(`${base} ${colorAndSize} ${contentLayout} ${loading} ${className||''}`)} {...props}>
+    <button class={twMerge(`${base} ${colors[color]} ${sizes[size]} ${contentLayout} ${loading} ${className||''}`)} {...props}>
       {IconLeft && getIcon(IconLeft)}
-      {children}
+      {IconLeftEnd && getIcon(IconLeftEnd)}
+      <span class={`${iconPosition == 'leftEnd' || iconPosition == 'rightEnd' ? 'flex-1' : ''}`}>{children}</span>
       {IconRight && getIcon(IconRight)}
-      {IconRight2 && getIcon(IconRight2)}
+      {IconRightEnd && getIcon(IconRightEnd)}
       {
-        isLoading && 
-        <span class="!opacity-100 absolute inset-0 flex items-center justify-center">
-          <span className="w-4 h-4 rounded-full animate-spin border-2 border-t-transparent border-white" />
-        </span>
+        isLoading &&
+        <span className={
+          'loader !opacity-100 absolute top-[50%] left-[50%] w-[1rem] h-[1rem] ml-[-0.5rem] mt-[-0.5rem] ' +
+          'rounded-full animate-spin border-2 !border-t-transparent border-white'
+        } />
       }
     </button>
   )

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,
@@ -16,14 +16,13 @@ export type SidebarProps = {
   Logo?: React.FC<{ width?: string, height?: string }>;
   menu?: { name: string; to: string; Icon: React.FC<{ className?: string }> }[]
   links?: { name: string; to: string; initial: string }[]
-  version?: string
 }
 
 function classNames(...classes: string[]) {
   return classes.filter(Boolean).join(' ')
 }
 
-export function Sidebar({ Logo, menu, links, version }: SidebarProps) {
+export function Sidebar({ Logo, menu, links }: SidebarProps) {
   const [sidebarOpen, setSidebarOpen] = useState(false)
   return (
     <>
@@ -46,14 +45,14 @@ export function Sidebar({ Logo, menu, links, version }: SidebarProps) {
                 </button>
               </div>
             </TransitionChild>
-            <SidebarContents Logo={Logo} menu={menu} links={links} version={version} />
+            <SidebarContents Logo={Logo} menu={menu} links={links} />
           </DialogPanel>
         </div>
       </Dialog>
 
       {/* Static sidebar for desktop */}
       <div className={`hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:flex-col ${sidebarWidth}`}>
-        <SidebarContents Logo={Logo} menu={menu} links={links} version={version} />
+        <SidebarContents Logo={Logo} menu={menu} links={links} />
       </div>
       
       {/* mobile sidebar closed */}
@@ -72,7 +71,7 @@ export function Sidebar({ Logo, menu, links, version }: SidebarProps) {
   )
 }
 
-function SidebarContents ({ Logo, menu, links, version }: SidebarProps) {
+function SidebarContents ({ Logo, menu, links }: SidebarProps) {
   const location = useLocation()
   const [store] = useTracked()
   const user = store.user
@@ -85,7 +84,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 },
   ]
@@ -102,7 +101,7 @@ function SidebarContents ({ Logo, menu, links, version }: SidebarProps) {
           <Link to="/">
             <Logo width="70" height={undefined} />
           </Link>
-          <span className="text-[9px] text-gray-900 font-semibold mt-4">{version}</span>
+          <span className="text-[9px] text-gray-900 font-semibold mt-4">{injectedConfig.version}</span>
         </div>
       )}
       <nav className="flex flex-1 flex-col">

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>. 
@@ -88,12 +88,12 @@ export function Styleguide({ config }: { config: Config }) {
             minWidth="330px" 
             options={[{ label: <><b>New Customer</b> / Add <b>Bruce Lee</b></>, className: 'border-bottom-with-space' }, ...options]}
           >
-            <Button type="white" IconRight2="v" class="gap-x-3">Dropdown bottom-right</Button>
+            <Button color="white" IconRight="v" class="gap-x-3">Dropdown bottom-right</Button>
           </Dropdown>
         </div>
         <div>
           <Dropdown options={options} dir="top-left" minWidth="250px">
-            <Button type="white" IconRight2="v" class="gap-x-3">Dropdown top-left</Button>
+            <Button color="white" IconRight="v" class="gap-x-3">Dropdown top-left</Button>
           </Dropdown>
         </div>
       </div>
@@ -107,9 +107,11 @@ export function Styleguide({ config }: { config: Config }) {
         <div><Button color="primary" size="sm">*-sm button</Button></div>
         <div><Button color="primary">*-md (default)</Button></div>
         <div><Button color="primary" size="lg">*-lg button</Button></div>
-        <div><Button IconLeft={<CheckIcon class="size-5 -my-5 -mx-0.5" />}>IconLeft=Element</Button></div>
-        <div><Button IconRight="v">IconRight=&quot;v&quot;</Button></div>
-        <div><Button IconRight2="v" className="w-[200px]">IconRight2=&quot;v&quot;</Button></div>
+        <div><Button IconLeft={<CheckIcon class="size-5 -my-5 -mx-0.5" />}>IconLeft</Button></div>
+        <div><Button IconLeft={<CheckIcon class="size-5 -my-5 -mx-0.5" />} className="w-[160px]">IconLeft 160px</Button></div>
+        <div><Button IconLeftEnd={<CheckIcon class="size-5 -my-5 -mx-0.5" />} className="w-[190px]">IconLeftEnd 190px</Button></div>
+        <div><Button IconRight="v">IconRight</Button></div>
+        <div><Button IconRightEnd="v" className="w-[190px]">IconRightEnd 190px</Button></div>
         <div><Button color="primary" IconRight="v" isLoading>primary isLoading</Button></div>
       </div>
 

package/components/settings/settings-account.tsx

@@ -5,7 +5,7 @@ import SvgTick from 'nitro-web/client/imgs/icons/tick.svg'
 import { Button, FormError, Field, Modal, Topbar, Tabbar } from 'nitro-web'
 
 export function SettingsAccount() {
-  const isLoading = useState('')
+  const isLoading = useState(false)
   const [removeModal, setRemoveModal] = useState()
   const [{user}, setStore] = sharedStore.useTracked()
   const [state, setState] = useState({
@@ -17,7 +17,7 @@ export function SettingsAccount() {
 
   async function onSubmit (e) {
     try {
-      const res = await util.request(e, `put /api/user/${user._id}?files=true`, state, isLoading)
+      const res = await util.request(`put /api/user/${user._id}?files=true`, state, e, isLoading)
       setStore((s) => ({ ...s, user: { ...s.user, ...res }, message: 'Saved successfully 👍️' }))
     } catch (errors) {
       return setState({ ...state, errors })
@@ -92,7 +92,7 @@ export function RemoveModal ({ show, setShow }) {
 
   async function onSubmit (e) {
     try {
-      await util.request(e, `delete /api/account/${state._id}`, null, isLoading)
+      await util.request(`delete /api/account/${state._id}`, null, e, isLoading)
       close()
       setStore(o => ({ ...o, message: 'Data deleted successfully, Goodbye 👋...' }))
       setTimeout(() => navigate('/signout'), 6000) // wait for setStore

package/components/settings/settings-business.tsx

@@ -7,7 +7,7 @@ import SvgTick from 'nitro-web/client/imgs/icons/tick.svg'
 import { Button, Field, Select, Topbar, Tabbar } from 'nitro-web'
 
 export function SettingsBusiness({ config }) {
-  const isLoading = useState('')
+  const isLoading = useState(false)
   const [{ user }, setStore] = sharedStore.useTracked()
   const [state, setState] = useState(() => {
     const company = user.company
@@ -26,7 +26,7 @@ export function SettingsBusiness({ config }) {
 
   async function onSubmit (e) {
     try {
-      const company = await util.request(e, `put /api/company/${user.company._id}`, state, isLoading)
+      const company = await util.request(`put /api/company/${user.company._id}`, state, e, isLoading)
       setStore((s) => ({ ...s, user: { ...s.user, company }, message: 'Saved successfully 👍️' }))
     } catch (errors) {
       console.log(errors)

package/components/settings/settings-team--member.tsx

@@ -13,7 +13,7 @@ type SettingsTeamMemberProps = {
 export function SettingsTeamMember ({ showModal, setShowModal, config }: SettingsTeamMemberProps) {
   // @param {object} showModal - user
   const [{ user }] = sharedStore.useTracked()
-  const [isLoading] = useState('')
+  const [isLoading] = useState(false)
   const [state, setState] = useState({
     business: {
       name: '',

package/components/settings/settings-team.tsx

@@ -5,7 +5,7 @@ import SvgPlus from 'nitro-web/client/imgs/icons/plus.svg'
 import { Button, Table, Avatar, Tabbar, Topbar, SettingsTeamMember } from 'nitro-web'
 
 export function SettingsTeam({ config }) {
-  const isLoading = useState('')
+  const isLoading = useState(false)
   const [showModal, setShowModal] = useState()
   const [{ user }] = sharedStore.useTracked()
   const [state] = useState({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "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/util.d.ts

@@ -158,7 +158,7 @@ export function pad(num: any, padLeft: any, fixedRight: any): any;
 export function pick(obj: any, keys: any): {};
 export function queryObject(search: any, assignTrue: any): any;
 export function queryString(obj: any): string;
-export function request(event: any, route: any, data: any, isLoading: any): Promise<any>;
+export function request(route: any, data: any, event: any, isLoading: any): Promise<any>;
 export function removeUndefined(variable: any): any;
 export function s3Image(awsUrl: any, image: any, size: string, i: any): any;
 export function sanitizeHTML(string: any): string;

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>>

package/util.js

@@ -908,12 +908,12 @@ export function queryString (obj) {
   return qs ? `?${qs}` : ''
 }
 
-export async function request (event, route, data, isLoading) {
+export async function request (route, data, event, isLoading) {
   /**
    * Axios request to the route
-   * @param {Event} event - event to prevent default
    * @param {string} route - e.g. 'post /api/user'
    * @param {object} <data> - payload
+   * @param {Event} <event> - event to prevent default
    * @param {array} <isLoading> - [isLoading, setIsLoading]
    * @return {promise}
    */
@@ -925,7 +925,7 @@ export async function request (event, route, data, isLoading) {
     // show loading
     if (isLoading) {
       if (isLoading[0]) return
-      else isLoading[1](' is-loading')
+      else isLoading[1](true)
     }
 
     // warning, not persisting through re-renders, but should be fine until loading is finished
@@ -950,7 +950,7 @@ export async function request (event, route, data, isLoading) {
     ])
 
     // success
-    if (isLoading) isLoading[1]('')
+    if (isLoading) isLoading[1](false)
     if (res.status == 'rejected') throw res.reason
     return res.value.data