1

I am building my own portfolio and I was looking for a way that I could have some of my pages(case studies) locked behind a static password like 1234 and then store that in the browser's cookies. how can I do that with Astro template?

Layout.astro:

---
import Basehead from "../components/Basehead.astro";
import { SITE_DESCRIPTION,SITE_TITLE } from '../consts';
const {frontmatter} = Astro.props;
---
<html>
  <head>
        <Basehead title={SITE_TITLE} description={SITE_DESCRIPTION}></Basehead>
    </head>

  <h1>{frontmatter.title}</h1>
  <p>{frontmatter.description}</p>
  <img src={frontmatter.cover} height="200" width="200" alt="" >
  <article>
      <slot /> <!-- Markdown content is injected here -->
  </article>
</html>

Page.mdx: My case study is here and I want to prompt users to enter the password if the password: true

---
layout: ../layouts/CaseStudyLayout.astro
title: case study post
description: the description
cover: https://framerusercontent.com/images/D5baHWHk2hVJyc1znehFavwU1I.jpeg
password: true
---

import Video from '../components/Video.astro'
export const title = 'My first MDX post'

## Background

This Markdown file creates a page at `your-domain.com/page-1/`

<Video />
Dark star
  • 5,192
  • 9
  • 35
  • 54

2 Answers2

0

You can accomplish this exploiting Astro.cookies.

---
import Basehead from "../components/Basehead.astro";
import { SITE_DESCRIPTION,SITE_TITLE } from '../consts';
const {frontmatter} = Astro.props;

if (frontmatter.password === true) {
  // Check cookie, I assume 1234 is your password.
  if (Astro.cookies.get('pass').value !== '1234') {
    // If not cookie is not correct, redirect to login page.
    return Astro.redirect(`/login`);
  }
}
// Otherwise page will be normally displayed.
---
<html>
...
</html>

You can set the cookie in your browser, or create a login page, where when users login, their browser will have password stored in their cookie.

Terence
  • 1
  • 1
-1

I would not recommend this approach, even if this is your own portfolio website. Your local / session storage is vulnerable to external attacks, and protected information like passwords should not be exposed here.

You should try to use JWT or any other middleware for authentication on backend related to the required pages.

A simple way to do that would be using a symmetric approach in JWT with a common shared secret between server and client. The signature of your encoded JWT gets verified during authentication.

In nodejs using jsonwebtoken npm library during login:

jwt.generate({payload}, shared_secret, [...options]);

Here you can also include options to set expiry time for the JWT token. Post that, you can use this generated token to serve all other requests that should only be accessible for an authenticated user.

In nodejs middleware:

jwt.verify(encodedData, shared_secret)

A common middleware for all restricted actions requiring authentication should serve the purpose.

I have not used Astro before, but I think this is achievable.

In more advanced applications, asymmetric JWT is used with public-private key pairs.

You can find more information about JWT here:

https://www.npmjs.com/package/jsonwebtoken

Apart from this, if you do not need a token for this - you can also try using a hashing library like bcrypt to store the hashed password in database.

For the restricted actions, the password entered by the user is hashed on backend and compared with the hash present in DB for the user. Note that this is a one way method meaning that the original password once hashed and stored cannot be recovered from the hash.

https://www.npmjs.com/package/bcrypt

pallasite99
  • 35
  • 9