SSR: Restricting Access to Specific Pages Based on Authenticated User

[karlhorky]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Summary

@KyleAMathews asked for this issue: #1100 (comment)

---

A guide about how to perform simple authentication and authorization in Server-Side Rendering (SSR) using getServerData would be great!

I would suggest that it include the following:

1. A page and related static images that are fully public (no authentication required) - eg. a login page
2. A page and related static images that are accessible only to any logged-in user - eg. an index page
3. A page and related static images that are accessible only to any admin user - eg. an admin dashboard page

Further background information / motivation:

• Authentication support #1100 (comment)
• Gatsby Plugin: Asset Manifest (for Server-Side Authentication in Front of Built Assets without client-side routes) #32479

Steps to Resolve this Issue

1. Look for a guide for authentication / authorization for SSR in the Gatsby docs
2. Fail in finding such a guide

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[karlhorky]

@KyleAMathews since you requested this, do you think you can disable the stale bot?

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[karlhorky]

@LekoArts can you disable the stale bot here? @KyleAMathews requested that I create this issue.

[iamalexm]

I'd love a documentation about this too!

[kdichev]

Hi guys I've recently tried to implement this feature on my SSR app routes and I've done it like so:

// routes
index.tsx
sign-in.tsx
sign-up.tsx
./dashboard/[...].tsx

// ./dashboard/[...].tsx
export const getServerData = async () => {
  const { access_token } = headers.get('cookie')
  const user = await getProfile({ auth: access_token })
  if (!user) {
    return {
      status: 301,
      headers: {
        Location: '/'
      }
    }
  }
  return {
    props: { user, access_token }
  }
}

I also have a function that I call when access_token is available from my auth package and set a cookie. Seems to be working alright.

// api/session
export default function sessionAPI(req: Req, res: Res) {
  const { access_token, expires_in }= JSON.parse(req.body);
  if (!access_token|| !expires_in ) {
    res.status(401).json({
      message: "Unauthorized",
    });
  } else {
    res.setHeader(
      "Set-Cookie",
      `access_token=${accessToken};Secure=true;HttpOnly=true;Path=/`
    );
    res.status(200).json({ message: "session created successfully" });
  }
}

// setter function when auth token is available from auth package
export const setSessionToken = async (token) =>
  fetch("/api/session", {
    method: "POST",
    body: JSON.stringify(token),
  });

Obviously I don't have much experience implementing ssr auth so I might be doing it wrong but also there are some issues with this setup:

1. redirect does not work in gatsby dev (it matches to 404 always) so I have to build and serve to test my code
2. cookies are not parsed, so I have to use a parser package

p.p let me know if you see if I can enhance my setup if it's not totally right