Using JWT from custom authentication to protect certain pages

Support
,
#1

Here’s what I already have:

  1. A custom web app that already has user authentication. It already leverages JWT for authentication.
  2. A semi-public site on Netlify that has certain pages I would like to only expose to authenticated users of my web app.

I would like to redirect users who are not authenticated to my web app login page to authenticate and then redirect back to their requested (protected) page on my public site.

Is this even possible? If so, what’s the best option? I’ve read as much documentation as I can find, but it seems like this might not be possible. And if it is, would I need to upgrade to the Business plan (likely cost-prohibitive)?

Thanks in advance!

#2

Hey, and welcome to the forum :slight_smile:

If I’m understanding your description correctly, then yes this is possible with Netlify. I know you said you’ve read all the docs already, but in case you were looking for something other than “Netlify Identity” you may not have found these, so posting here:

You’ll see that there are two options for registration: open vs. invitation-only, and there are a few different auth options. If you go the open registration route, you get 1,000 authenticated users free, and 5 invite-only users for free. More on that here, under “Identity”:

Not sure if I answered your question here- feel free to post follow-ups if not!

1 Like
#3

Last thing! This is about role-based access specifically:

1 Like
#4

Jen, thanks for the response, but it looks like I didn’t explain myself well enough.

I don’t want to require my users to have to create an additional account for the Netlify site. They already have an account within the web app that I would like to leverage.

Thanks!

#6

Thanks so much for clarifying! I was definitely confusing authentication (Netlify Identity, or an external provider, which you mentioned you already have) with authorization (role-based access).

So, based on your current setup, the role-based access docs I posted above are in fact what you’re interested in. You’re right that you would need a Business plan to access that feature.

#7

Thanks, Jen. But I still don’t see how this is possible based on the docs, even with a business plan. According to the docs, there are only 4 supported external providers. Is there a way to do a custom (my web app) external provider that I’m not seeing?

I need to know how to do this (if possible) before I can make a decision.

#8

As far as I know, those external providers are examples of auth providers we support but are not required- you can bring your own JWTs. My colleague @futuregerald set up a small example of how this would work:


My understanding of this is that when someone clicks “Sign In” on login.html, the auth.js script in functions/ is called, which sets a cookie for that user. Since you’ll enter your JWT_SECRET environment var in the Netlify UI, Netlify can then check that cookie and redirect accordingly.

Let me know if this answers your question or if we can help further!

2 Likes
#9

I’m in a similar situation where I have an app that already handles user authentication using jwt. I have a prisma server and a graphql yoga server being hosted on heroku. I also have a next.js app for my frontend that i need to host. Heroku wasn’t playing well with this, so I deployed it here on netlify. After some trial and error, I was able to get my app deployed. I am able to login using an existing user from my database. I can verify that a JWT token is being set once I’m logged in. I can navigate to any page I want to after that. However, whenever I manually refresh the page, I lose my jwt token. This does not happen when developing locally. Nor did it happen when I had the app deployed on Heroku. Within the context of my app, jwt secret is being stored in an environmental variable on the yoga server on Heroku, so I’m not sure why I would need any stored on netlify as my front end app does not need environmental variables.

#11

Hey @jamestrenda,
If I understand correctly, this is a bit different from the case above, which was about role-based redirects with an existing JWT secret that is stored in Netlify’s UI. But it sounds like you have your own server where you store your JWT secret. We can’t debug your code, but my colleague offered some general ideas. TL;DR: you’ll have to figure out how to persist the token on the client side or use client-side routing that avoids fully refreshing and clearing your variables even when you navigate to a different route.

  • Next.js rehydrates into a full React app, so you could use the built-in link tag to do client-side navigation
  • You could look into persisting the token in localStorage or something similar

Wanna give one of those a shot and let us know how it goes?