Call refresh on init

Author: mekanix

package.json

@@ -1,6 +1,6 @@
 {
   "name": "freenit",
-  "version": "0.1.5",
+  "version": "0.1.13",
   "private": false,
   "description": "Freenit framework",
   "author": "Goran Mekić",

src/App.js

@@ -1,16 +1,12 @@
 import React from 'react'
-import { StoreProvider, store } from 'store-provider'
 import { BrowserRouter as Router } from 'react-router-dom'
 import { ThemeProvider } from '@material-ui/styles'
 import { Style } from 'radium'
 
+import { StoreProvider, store } from './store-provider'
 import Routing from './routing'
 import styles from './styles'
 import theme from './theme'
-import { auth } from './auth'
-
-
-auth.init('/api/v0')
 
 
 const App = () => {

src/Provider.js

@@ -1,32 +1,37 @@
+import { makeAutoObservable } from 'mobx'
 import { rest } from './utils'
 
 
-class Auth
-{
-  access = { expire: null, date: null }
-  refresh = { expire: null, data: null }
+class AuthStore {
+  tokens = {
+    access: { expire: null, date: null },
+    refresh: { expire: null, data: null },
+  }
+  initialized = false
+
+  constructor() {
+    makeAutoObservable(this)
+  }
 
   init = async (api) => {
     window.rest = rest(api)
     window.rest.API_ROOT = api
-    await this.refresh()
+    await this.refresh(true)
+    this.initialized = true
   }
 
   login = async (email, password) => {
     try {
       const response = await window.rest.post('/auth/login', {email, password})
       const { accessExpire, refreshExpire } = response.data
       const now = new Date()
-      this.access.expire = Number(accessExpire)
-      this.access.date = new Date(now.getTime() + this.access.expire * 1000)
-      this.refresh.expire = Number(refreshExpire)
-      this.refresh.date = new Date(now.getTime() + this.refresh.expire * 1000)
-      const result = {
-        access: this.access,
-        refresh: this.refresh,
-        ok: true,
-      }
-      return result
+      const ae = Number(accessExpire)
+      const re = Number(refreshExpire)
+      this.tokens.access.expire = ae
+      this.tokens.access.date = new Date(now.getTime() + ae * 1000)
+      this.tokens.refresh.expire = re
+      this.tokens.refresh.date = new Date(now.getTime() + re * 1000)
+      return { ...this.tokens, ok: true }
     } catch (error) {
       return { ...error, ok: false }
     }
@@ -35,41 +40,39 @@ class Auth
   logout = async () => {
     try {
       await window.rest.post('/auth/logout', {})
-      this.access.expire = null
-      this.access.date = null
-      this.refresh.expire = null
-      this.refresh.date = null
+      this.tokens.access = { expire: null, date: null }
+      this.tokens.refresh = { expire: null, date: null }
       return { ok: true }
     } catch (error) {
       return { ...error, ok: false }
     }
   }
 
-  refresh = async () => {
+  refresh = async (initialized = false) => {
+    if (!this.initialized && !initialized) { return { ok: false } }
+    if (this.authenticated()) { return { ok: true } }
     try {
       const response = await window.rest.post('/auth/refresh', {})
       const { accessExpire, refreshExpire } = response.data
       const now = new Date()
-      this.access.expire = Number(accessExpire)
-      this.access.date = new Date(now.getTime() + this.access.expire * 1000)
-      this.refresh.expire = Number(refreshExpire)
-      this.refresh.date = new Date(now.getTime() + this.refresh.expire * 1000)
-      return {
-        access: this.access,
-        refresh: this.access,
-        ok: true,
-      }
+      const ae = Number(accessExpire)
+      const re = Number(refreshExpire)
+      this.tokens.access.expire = ae
+      this.tokens.access.date = new Date(now.getTime() + ae * 1000)
+      this.tokens.refresh.expire = re
+      this.tokens.refresh.date = new Date(now.getTime() + re * 1000)
+      return { ...this.tokens, ok: true }
     } catch (error) {
       return { ...error, ok: false }
     }
   }
 
   authenticated = () => {
-    if (!this.access.expire) { return false }
-    if (!this.refresh.expire) { return false }
+    if (!this.tokens.access.expire) { return false }
+    if (!this.tokens.refresh.expire) { return false }
     const now = new Date()
-    if (now > this.access.date) { return false }
-    if (now > this.refresh.date) { return false }
+    if (now > this.tokens.access.date) { return false }
+    if (now > this.tokens.refresh.date) { return false }
     return true
   }
 
@@ -80,7 +83,43 @@ class Auth
     }
     return await fn(...data)
   }
+
+  confirm = async (token) => {
+    try {
+      await window.rest.get(`/auth/register/${token}`)
+      return { ok: true }
+    } catch (error) {
+      return { ...error, ok: false }
+    }
+  }
+
+  register = async (email, password) => {
+    try {
+      await window.rest.post('/auth/register', { email, password })
+      return { ok: true }
+    } catch (error) {
+      return { ...error, ok: false }
+    }
+  }
+
+  reset = async email => {
+    try {
+      await window.rest.post('/auth/reset/request', { email })
+      return { ok: true }
+    } catch (error) {
+      return { ...error, ok: false }
+    }
+  }
+
+  changePassword = async (password, token) => {
+    try {
+      await window.rest.post('/auth/reset', { password, token })
+      return { ok: true }
+    } catch (error) {
+      return { ...error, ok: false }
+    }
+  }
 }
 
 
-export const auth = new Auth()
+export const auth = new AuthStore()

src/auth.js

@@ -3,7 +3,7 @@ import Confirm from './confirm'
 import Login from './login'
 import Register from './register'
 import Reset from './reset'
-import Store from './store'
+import { auth as store } from '../../auth'
 
 
 const auth = {
@@ -12,7 +12,7 @@ const auth = {
   Login,
   Register,
   Reset,
-  store: new Store(),
+  store,
 }
 
 

src/pages/auth/index.js

@@ -1,32 +1,33 @@
 import React from 'react'
 import { Button, Snackbar } from '@material-ui/core'
-import { auth } from '../../auth'
 import { withStore } from '../../store'
 
 
-const EmptyTemplate = props => {
-  const { history, notification } = props.store
-  if (props.secure && !auth.authenticated()) {
-    history.push('/')
-    return null
+class EmptyTemplate extends React.Component {
+  render() {
+    const { auth, history, notification } = this.props.store
+    if (auth.initialized && this.props.secure && !auth.authenticated()) {
+      history.push('/')
+      return null
+    }
+    return (
+      <div style={this.props.style}>
+        {this.props.children}
+        <Snackbar
+          autoHideDuration={5000}
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+          open={Boolean(notification.message)}
+          onClose={notification.close}
+          message={notification.message}
+          action={(
+            <Button color="secondary" size="small" onClick={notification.close}>
+              CLOSE
+            </Button>
+          )}
+        />
+      </div>
+    )
   }
-  return (
-    <div style={props.style}>
-      {props.children}
-      <Snackbar
-        autoHideDuration={5000}
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-        open={Boolean(notification.message)}
-        onClose={notification.close}
-        message={notification.message}
-        action={(
-          <Button color="secondary" size="small" onClick={notification.close}>
-            CLOSE
-          </Button>
-        )}
-      />
-    </div>
-  )
 }