Skip to content
This repository was archived by the owner on Aug 12, 2021. It is now read-only.

Commit e5dc5c9

Browse files
TyMickTyMick
committed
Add preview image for social sharing
1 parent 11edfed commit e5dc5c9

File tree

2 files changed

+173
-152
lines changed

2 files changed

+173
-152
lines changed

‎pages/index.jsx

Lines changed: 173 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -4,168 +4,189 @@ import React from "react";
44
import Link from "next/link";
55
import { Container, Card } from "reactstrap";
66
import Layout from "../components/layout";
7+
import Head from "next/head";
78

89
export default () => {
910
return (
10-
<Layout pageTitle="">
11-
<div className="content">
12-
<Container>
13-
<Card body>
14-
<h1 className="h4 mt-2 mb-4">
15-
Next.js local authentication with MongoDB
16-
</h1>
11+
<>
12+
{/* prettier-ignore */}
13+
<Head>
14+
<meta property="og:title" content="Next.js local authentication with MongoDB – Ty Mick" />
15+
<meta property="og:description" content="Next.js + MongoDB local authentication boilerplate employing serverless functions, hashing passwords with bcrypt, and implementing an open source Bootstrap/reactstrap dashboard design." />
16+
<meta property="og:image" content="https://nextjs-local-authentication.tymick.me/preview.png" />
17+
<meta property="og:url" content="https://nextjs-local-authentication.tymick.me/" />
18+
<meta name="twitter:card" content="summary_large_image" />
19+
<meta property="og:site_name" content="Ty Mick" />
20+
<meta name="twitter:image:alt" content="A preview of the desktop version of this demo" />
21+
<meta name="twitter:site" content="@tywmick" />
22+
</Head>
1723

18-
<p>Greetings, traveler!</p>
19-
<p>
20-
This is the beginning stages of an app I&rsquo;m building. As long
21-
as the app itself is half-finished, I figure this shell is a
22-
satisfactory portfolio piece in the meantime. Please enjoy{" "}
23-
<a href="https://github.com/TyWMick/nextjs-local-authentication">
24-
the source code
25-
</a>{" "}
26-
on GitHub, and observe the following features:
27-
</p>
24+
<Layout pageTitle="">
25+
<div className="content">
26+
<Container>
27+
<Card body>
28+
<h1 className="h4 mt-2 mb-4">
29+
Next.js local authentication with MongoDB
30+
</h1>
2831

29-
<h2 className="h6">Pages</h2>
30-
<ul>
31-
<li>
32-
This demo consists of five pages: this index,{" "}
33-
<Link href="/dashboard">
34-
<a>/dashboard</a>
35-
</Link>
36-
,{" "}
37-
<Link href="/settings">
38-
<a>/settings</a>
39-
</Link>
40-
,{" "}
41-
<Link href="/register">
42-
<a>/register</a>
43-
</Link>
44-
, and{" "}
45-
<Link href="/login">
46-
<a>/login</a>
47-
</Link>
48-
.
49-
</li>
50-
<li>
51-
The dashboard and settings pages require aunthentication, so if
52-
you try to visit either before logging in, you&rsquo;ll be
53-
redirected to the login page.
54-
</li>
55-
</ul>
32+
<p>Greetings, traveler!</p>
33+
<p>
34+
This is the beginning stages of an app I&rsquo;m building. As
35+
long as the app itself is half-finished, I figure this shell is
36+
a satisfactory portfolio piece in the meantime. Please enjoy{" "}
37+
<a href="https://github.com/TyWMick/nextjs-local-authentication">
38+
the source code
39+
</a>{" "}
40+
on GitHub, and observe the following features:
41+
</p>
5642

57-
<h2 className="h6">Accounts</h2>
58-
<ul>
59-
<li>
60-
You can{" "}
61-
<Link href="/register">
62-
<a>register</a>
63-
</Link>{" "}
64-
with any username (that doesn&rsquo;t currently exist in the
65-
database) and password you like, and your credentials (after
66-
your password has been hashed with{" "}
67-
<a href="https://github.com/kelektiv/node.bcrypt.js">bcrypt</a>)
68-
will be stored in a database managed by{" "}
69-
<a href="https://www.mongodb.com/cloud/atlas">MongoDB Atlas</a>{" "}
70-
on a free plan.
71-
</li>
72-
<li>
73-
If you&rsquo;d rather not create an account, you can instead{" "}
74-
<Link href="/login">
75-
<a>log in</a>
76-
</Link>{" "}
77-
with username <code>ty</code> and password <code>password</code>{" "}
78-
(I promise I never use that in real life).
79-
</li>
80-
<li>
81-
Once you&rsquo;ve logged in, the{" "}
82-
<Link href="/dashboard">
83-
<a>dashboard page</a>
84-
</Link>{" "}
85-
isn&rsquo;t terribly interesting, but if you head on over to{" "}
86-
<Link href="/settings">
87-
<a>Settings</a>
88-
</Link>
89-
, you can change your username and/or password and even delete
90-
your account, which completely removes its database entry. Note,
91-
though, that you can do none of these things with the demo{" "}
92-
<code>ty</code> account, for which the profile update and delete
93-
account APIs will return <code>403</code> errors.
94-
</li>
95-
<li>
96-
If you try fiddling around with multiple accounts, you&rsquo;ll
97-
see that you can&rsquo;t register an account with a username
98-
that already exists, and you also can&rsquo;t change your
99-
username to that of another account.
100-
</li>
101-
</ul>
43+
<h2 className="h6">Pages</h2>
44+
<ul>
45+
<li>
46+
This demo consists of five pages: this index,{" "}
47+
<Link href="/dashboard">
48+
<a>/dashboard</a>
49+
</Link>
50+
,{" "}
51+
<Link href="/settings">
52+
<a>/settings</a>
53+
</Link>
54+
,{" "}
55+
<Link href="/register">
56+
<a>/register</a>
57+
</Link>
58+
, and{" "}
59+
<Link href="/login">
60+
<a>/login</a>
61+
</Link>
62+
.
63+
</li>
64+
<li>
65+
The dashboard and settings pages require aunthentication, so
66+
if you try to visit either before logging in, you&rsquo;ll be
67+
redirected to the login page.
68+
</li>
69+
</ul>
10270

103-
<h2 className="h6">Cookies</h2>
104-
<ul>
105-
<li>
106-
Authentication and session information are facilitated by a
107-
browser cookie named &ldquo;token&rdquo;, which you can see with
108-
your browser&rsquo;s web development tools. If you do not check
109-
the &ldquo;remember me&rdquo; box on the login page, this cookie
110-
will expire when you end your browser session (i.e., quit the
111-
browser program, not just close the tab or window). If you do
112-
check the box, this cookie will expire in two weeks.
113-
</li>
114-
<li>
115-
If you open the dashboard and/or settings pages in multiple
116-
browser tabs, when you log out in one tab (in the profile
117-
dropdown in the top-right of the page), you&rsquo;ll
118-
automatically be logged out of all other tabs.
119-
</li>
120-
</ul>
71+
<h2 className="h6">Accounts</h2>
72+
<ul>
73+
<li>
74+
You can{" "}
75+
<Link href="/register">
76+
<a>register</a>
77+
</Link>{" "}
78+
with any username (that doesn&rsquo;t currently exist in the
79+
database) and password you like, and your credentials (after
80+
your password has been hashed with{" "}
81+
<a href="https://github.com/kelektiv/node.bcrypt.js">
82+
bcrypt
83+
</a>
84+
) will be stored in a database managed by{" "}
85+
<a href="https://www.mongodb.com/cloud/atlas">
86+
MongoDB Atlas
87+
</a>{" "}
88+
on a free plan.
89+
</li>
90+
<li>
91+
If you&rsquo;d rather not create an account, you can instead{" "}
92+
<Link href="/login">
93+
<a>log in</a>
94+
</Link>{" "}
95+
with username <code>ty</code> and password{" "}
96+
<code>password</code> (I promise I never use that in real
97+
life).
98+
</li>
99+
<li>
100+
Once you&rsquo;ve logged in, the{" "}
101+
<Link href="/dashboard">
102+
<a>dashboard page</a>
103+
</Link>{" "}
104+
isn&rsquo;t terribly interesting, but if you head on over to{" "}
105+
<Link href="/settings">
106+
<a>Settings</a>
107+
</Link>
108+
, you can change your username and/or password and even delete
109+
your account, which completely removes its database entry.
110+
Note, though, that you can do none of these things with the
111+
demo <code>ty</code> account, for which the profile update and
112+
delete account APIs will return <code>403</code> errors.
113+
</li>
114+
<li>
115+
If you try fiddling around with multiple accounts,
116+
you&rsquo;ll see that you can&rsquo;t register an account with
117+
a username that already exists, and you also can&rsquo;t
118+
change your username to that of another account.
119+
</li>
120+
</ul>
121121

122-
<h2 className="h6">Design</h2>
123-
<ul>
124-
<li>
125-
The design of this demo comes from{" "}
126-
<a href="https://www.creative-tim.com/product/paper-dashboard-react">
127-
Paper Dashboard React
128-
</a>
129-
, v1.1.0, by{" "}
130-
<a href="https://www.creative-tim.com/">Creative Tim</a>, but I
131-
did{" "}
132-
<a href="https://github.com/TyWMick/nextjs-local-authentication/blob/master/styles.scss">
133-
fix several parts
134-
</a>{" "}
135-
I found ugly or unwieldy.
136-
</li>
137-
<li>
138-
Design work also involved the{" "}
139-
<a href="https://getbootstrap.com/">Bootstrap</a> library via{" "}
140-
<a href="https://reactstrap.github.io/">reactstrap</a>.
141-
I&rsquo;ll admit, I like{" "}
142-
<a href="https://react-bootstrap.netlify.com/">
143-
React Bootstrap
144-
</a>{" "}
145-
better, but Paper Dashboard React already uses reactstrap in its
146-
template.
147-
</li>
148-
</ul>
122+
<h2 className="h6">Cookies</h2>
123+
<ul>
124+
<li>
125+
Authentication and session information are facilitated by a
126+
browser cookie named &ldquo;token&rdquo;, which you can see
127+
with your browser&rsquo;s web development tools. If you do not
128+
check the &ldquo;remember me&rdquo; box on the login page,
129+
this cookie will expire when you end your browser session
130+
(i.e., quit the browser program, not just close the tab or
131+
window). If you do check the box, this cookie will expire in
132+
two weeks.
133+
</li>
134+
<li>
135+
If you open the dashboard and/or settings pages in multiple
136+
browser tabs, when you log out in one tab (in the profile
137+
dropdown in the top-right of the page), you&rsquo;ll
138+
automatically be logged out of all other tabs.
139+
</li>
140+
</ul>
141+
142+
<h2 className="h6">Design</h2>
143+
<ul>
144+
<li>
145+
The design of this demo comes from{" "}
146+
<a href="https://www.creative-tim.com/product/paper-dashboard-react">
147+
Paper Dashboard React
148+
</a>
149+
, v1.1.0, by{" "}
150+
<a href="https://www.creative-tim.com/">Creative Tim</a>, but
151+
I did{" "}
152+
<a href="https://github.com/TyWMick/nextjs-local-authentication/blob/master/styles.scss">
153+
fix several parts
154+
</a>{" "}
155+
I found ugly or unwieldy.
156+
</li>
157+
<li>
158+
Design work also involved the{" "}
159+
<a href="https://getbootstrap.com/">Bootstrap</a> library via{" "}
160+
<a href="https://reactstrap.github.io/">reactstrap</a>.
161+
I&rsquo;ll admit, I like{" "}
162+
<a href="https://react-bootstrap.netlify.com/">
163+
React Bootstrap
164+
</a>{" "}
165+
better, but Paper Dashboard React already uses reactstrap in
166+
its template.
167+
</li>
168+
</ul>
149169

150-
<h2 className="h6">Serverless functions</h2>
151-
<ul>
152-
<li>
153-
This demo&rsquo;s APIs (and server-rendered pages) are
154-
serverless functions created using{" "}
155-
<a href="https://nextjs.org/">Next.js</a> and hosted on{" "}
156-
<a href="https://zeit.co/">ZEIT Now</a>.
157-
</li>
158-
</ul>
170+
<h2 className="h6">Serverless functions</h2>
171+
<ul>
172+
<li>
173+
This demo&rsquo;s APIs (and server-rendered pages) are
174+
serverless functions created using{" "}
175+
<a href="https://nextjs.org/">Next.js</a> and hosted on{" "}
176+
<a href="https://zeit.co/">ZEIT Now</a>.
177+
</li>
178+
</ul>
159179

160-
<p>Thanks for checking out this demo!</p>
180+
<p>Thanks for checking out this demo!</p>
161181

162-
<p>Sincerely,</p>
163-
<div className="signature">
164-
<a href="http://tymick.me">Ty</a>
165-
</div>
166-
</Card>
167-
</Container>
168-
</div>
169-
</Layout>
182+
<p>Sincerely,</p>
183+
<div className="signature">
184+
<a href="http://tymick.me">Ty</a>
185+
</div>
186+
</Card>
187+
</Container>
188+
</div>
189+
</Layout>
190+
</>
170191
);
171192
};

‎public/preview.png

68.5 KB
Loading

0 commit comments

Comments
 (0)