2018-12-14 23:05:54 +01:00
|
|
|
import { Component } from 'react'
|
|
|
|
import Router from 'next/router'
|
|
|
|
import nextCookie from 'next-cookies'
|
|
|
|
import cookie from 'js-cookie'
|
2019-02-11 14:17:43 +01:00
|
|
|
|
|
|
|
export const login = async ({ token }) => {
|
|
|
|
cookie.set('token', token, { expires: 1 })
|
|
|
|
Router.push('/profile')
|
2018-12-14 23:05:54 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
export const logout = () => {
|
|
|
|
cookie.remove('token')
|
|
|
|
// to support logging out from all windows
|
|
|
|
window.localStorage.setItem('logout', Date.now())
|
|
|
|
Router.push('/login')
|
|
|
|
}
|
|
|
|
|
2019-02-11 14:17:43 +01:00
|
|
|
// Gets the display name of a JSX component for dev tools
|
|
|
|
const getDisplayName = Component =>
|
|
|
|
Component.displayName || Component.name || 'Component'
|
|
|
|
|
|
|
|
export const withAuthSync = WrappedComponent =>
|
|
|
|
class extends Component {
|
|
|
|
static displayName = `withAuthSync(${getDisplayName(WrappedComponent)})`
|
|
|
|
|
|
|
|
static async getInitialProps (ctx) {
|
|
|
|
const token = auth(ctx)
|
|
|
|
|
|
|
|
const componentProps =
|
|
|
|
WrappedComponent.getInitialProps &&
|
|
|
|
(await WrappedComponent.getInitialProps(ctx))
|
|
|
|
|
|
|
|
return { ...componentProps, token }
|
|
|
|
}
|
|
|
|
|
2018-12-14 23:05:54 +01:00
|
|
|
constructor (props) {
|
|
|
|
super(props)
|
|
|
|
|
|
|
|
this.syncLogout = this.syncLogout.bind(this)
|
|
|
|
}
|
2019-02-11 14:17:43 +01:00
|
|
|
|
2018-12-14 23:05:54 +01:00
|
|
|
componentDidMount () {
|
|
|
|
window.addEventListener('storage', this.syncLogout)
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount () {
|
|
|
|
window.removeEventListener('storage', this.syncLogout)
|
|
|
|
window.localStorage.removeItem('logout')
|
|
|
|
}
|
|
|
|
|
|
|
|
syncLogout (event) {
|
|
|
|
if (event.key === 'logout') {
|
|
|
|
console.log('logged out from storage!')
|
|
|
|
Router.push('/login')
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
render () {
|
|
|
|
return <WrappedComponent {...this.props} />
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-02-11 14:17:43 +01:00
|
|
|
export const auth = ctx => {
|
2018-12-14 23:05:54 +01:00
|
|
|
const { token } = nextCookie(ctx)
|
|
|
|
|
2019-02-27 12:55:25 +01:00
|
|
|
/*
|
|
|
|
* This happens on server only, ctx.req is available means it's being
|
|
|
|
* rendered on server. If we are on server and token is not available,
|
|
|
|
* means user is not logged in.
|
|
|
|
*/
|
2018-12-14 23:05:54 +01:00
|
|
|
if (ctx.req && !token) {
|
|
|
|
ctx.res.writeHead(302, { Location: '/login' })
|
|
|
|
ctx.res.end()
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
2019-02-27 12:55:25 +01:00
|
|
|
// We already checked for server. This should only happen on client.
|
2018-12-14 23:05:54 +01:00
|
|
|
if (!token) {
|
|
|
|
Router.push('/login')
|
|
|
|
}
|
|
|
|
|
|
|
|
return token
|
|
|
|
}
|