61 lines
1.6 KiB
JavaScript
61 lines
1.6 KiB
JavaScript
import Layout from '../components/Layout'
|
|
|
|
const Home = () => (
|
|
<Layout>
|
|
<h1>
|
|
<img
|
|
src="/GitHub-Mark-32px.png"
|
|
width="32"
|
|
height="32"
|
|
style={{ marginRight: '.3em', verticalAlign: 'middle' }}
|
|
/>
|
|
<a href="https://github.com/vvo/next-iron-session">next-iron-session</a> -
|
|
Authentication example
|
|
</h1>
|
|
|
|
<p>
|
|
This example creates an authentication system that uses a{' '}
|
|
<b>signed and encrypted cookie to store session data</b>.
|
|
</p>
|
|
|
|
<p>
|
|
It uses current best practices as for authentication in the Next.js
|
|
ecosystem:
|
|
<br />
|
|
1. <b>no `getInitialProps`</b> to ensure every page is static
|
|
<br />
|
|
2. <b>`useUser` hook</b> together with `
|
|
<a href="https://swr.now.sh/">swr`</a> for data fetching
|
|
</p>
|
|
|
|
<h2>Features</h2>
|
|
|
|
<ul>
|
|
<li>Logged in status synchronized between browser windows/tabs</li>
|
|
<li>Layout based on logged in status</li>
|
|
<li>All pages are static</li>
|
|
<li>Session data is signed and encrypted in a cookie</li>
|
|
</ul>
|
|
|
|
<h2>Steps to test the functionality:</h2>
|
|
|
|
<ol>
|
|
<li>Click login and enter your GitHub username.</li>
|
|
<li>
|
|
Click home and click profile again, notice how your session is being
|
|
used through a token stored in a cookie.
|
|
</li>
|
|
<li>
|
|
Click logout and try to go to profile again. You'll get redirected to
|
|
the `/login` route.
|
|
</li>
|
|
</ol>
|
|
<style jsx>{`
|
|
li {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
`}</style>
|
|
</Layout>
|
|
)
|
|
|
|
export default Home
|