add server-sent errors and reduce oauth flow bare error pages

api/auth.js

@@ -3,6 +3,7 @@ import { type Context } from 'koa'
 import { type AppContext, type Router } from '../Roleypoly'
 import ksuid from 'ksuid'
 import logger from '../logger'
+import renderError from '../util/error'
 const log = logger(__filename)
 
 export default (R: Router, $: AppContext) => {
@@ -73,7 +74,7 @@ export default (R: Router, $: AppContext) => {
     ctx.redirect(url)
   })
 
-  R.get('/api/oauth/callback', async (ctx: Context) => {
+  R.get('/api/oauth/callback', async (ctx: Context, next: *) => {
     const { code, state } = ctx.query
     const { oauthRedirect: r } = ctx.session
     delete ctx.session.oauthRedirect
@@ -83,14 +84,22 @@ export default (R: Router, $: AppContext) => {
 
     if (code == null) {
       ctx.status = 400
+      await renderError($, ctx)
       return
     }
 
     if (state != null) {
-      const ksState = ksuid.parse(state)
+      try {
-      const twoMinAgo = new Date() - 1000 * 60 * 2
+        const ksState = ksuid.parse(state)
-      if (ksState.date < twoMinAgo) {
+        const fiveMinAgo = new Date() - 1000 * 60 * 5
+        if (ksState.date < fiveMinAgo) {
+          ctx.status = 419
+          await renderError($, ctx)
+          return
+        }
+      } catch (e) {
         ctx.status = 400
+        await renderError($, ctx)
         return
       }
     }
@@ -103,6 +112,7 @@ export default (R: Router, $: AppContext) => {
     } catch (e) {
       log.error('token and auth fetch failure', e)
       ctx.status = 400
+      return renderError($, ctx)
     }
   })
 

next.config.js

@@ -1,4 +1,4 @@
-require('dotenv').config()
+require('dotenv').config({ quiet: true })
 module.exports = {
   publicRuntimeConfig: {
     BOT_HANDLE: process.env.BOT_HANDLE

ui/pages/_error.js

@@ -61,8 +61,10 @@ export default class CustomErrorPage extends React.Component {
     return { statusCode }
   }
 
+  render400 = () => this.out('400', `Your client sent me something weird...`, '((((；゜Д゜)))')
   render403 = () => this.out('403', `You weren't allowed to access this.`, 'あなたはこの点に合格しないかもしれません')
   render404 = () => this.out('404', 'This page is in another castle.', 'お探しのページは見つかりませんでした')
+  render419 = () => this.out('419', 'Something went too slowly...', 'おやすみなさい〜')
   render500 = () => this.out('500', `The server doesn't like you right now. Feed it a cookie.`, 'クッキーを送ってください〜  クッキーを送ってください〜')
   renderDefault = () => this.out('Oops', 'Something went bad. How could this happen?', 'おねがい？')
   renderServer = () => this.out('Oops.', 'Server was unhappy about this render. Try reloading or changing page.', 'クッキーを送ってください〜')
@@ -86,16 +88,18 @@ export default class CustomErrorPage extends React.Component {
   }
 
   handlers = {
+    400: this.render400,
     403: this.render403,
     404: this.render404,
+    419: this.render419,
     500: this.render500,
     1001: this.renderAuthExpired
   }
 
   render () {
-    if (this.props.originalName === 'ErrorPage') {
+    // if (this.props.originalName === 'ErrorPage') {
-      return this.renderServer()
+    //   return this.renderServer()
-    }
+    // }
 
     if (this.props.statusCode in this.handlers) {
       return this.handlers[this.props.statusCode]()

ui/pages/auth/login.js

@@ -163,7 +163,6 @@ export default class AuthLogin extends React.Component<AuthLoginProps, AuthLogin
   }
 
   get dm () {
-    console.log({ e: process.env })
     if (BOT_HANDLE) {
       const [username, discrim] = BOT_HANDLE.split('#')
       return <><b>{ username }</b>#{discrim}</>

util/error.js

@@ -0,0 +1,4 @@
+export default ($, ctx) => {
+  ctx.res.statusCode = ctx.status
+  return $.ui.renderError(null, ctx.req, ctx.res, '/_error', {})
+}