Storing file (pdf) so only authenticated user can access them (with nextjs)

user_15224282 0
Viewed 130

I'm trying to build a website which has some private pages. And my goal is it that the users have the option to download PDFs from there, but only if they're authenticated. Now my question is, where should I store the PDF files, so that it can only be accessed by the authenticated users and how should I serve/access them. And all that with nextjs, if possible (I use next-auth for authentication).

It's a pretty general question and I don't need specific answer for it but a general way which I should follow or thing that I should look into would be awesome. I'm kinda new to web development, so sorry if the question is dumb.

next.js node.js private pdf file
1 Answers

Authentication

I think you can combine the power of JavaScript and CSS to achieve this.

After authenticating the user with your desired framework, then navigate inside the component that will display login or sign up, and set up react hook state as this:

const [isAuthenticated, setIsAuthenticated] = useState(false);

Now the token generated by the authentication framework must have been saved. Use if else control to join them as this:

const user = Auth.user({email:abc@gmail.com})
let message
if (user){
setIsAuthenticated(true);
Message = <h3>Welcome {user.username}</h3>
}else {
router.push('/')
}
.
.
.
return(
<div className={isAuthenticated ? 'display': ''}>
<button><a href="URL link">download link</a></button>
</div>
)

Inside the global CSS file, Add the following lines

.display {
display:none;
}

This should do it. It will only display the DOM to only authenticated users.

user_152206310
Related