So, I’m trying to take the program created with the course that demonstrates the passport local strategy, and replace the pug view with react.
I’ve figured out how to use react-router-dom to redirect to the profile page after signing up or logging in… however, this is as far as i’ve gotten. i’ve been stumped for weeks now on how to “ensure authentication” of the profile to successfully display the user’s profile page. how to sign up/login, then successfully run the “ensureAuthentication” function properly to display the user’s information in a separate link, specifically as the user’s individual profile page, if they login successfully, in React, as it does with the pug view engine in the fcc course?
this may be going off way deep into uncharted territory for what is taught in the fcc courses, but i hope somebody can help
First of all I’m not a React dev, I’m an Angular dev, but for stuff like this concepts are basically the same. (both are usually SPA frameworks/libs, or Single Page Application)
So from what you’ve mentioned here are my concerns/comments: If your using React, you probably don’t need pug at all. React under the average use-case is used for SPA. So all your back-end has to do is serve up the index.html with the “built” React code for all routes it doesn’t know about.
When your developing usually you have your back-end running as normal, and CRA runs its own server and proxies requests to your back-end (see this). This way CRA can provide auto-reloading without affecting your back-end during development.
Pug being a back-end template engine just increases complexity for no reason as React will handle the “UI”.
I won’t dive deep into how you should implement your passport setup, as there are tons of guides on such topics. Rather I’ll focus on addressing what your app should be doing in general. This is a non-exhaustive list of stuff you’d probably want to do. If you have more issues, identify roughly what is going on, and ask for more help either here or elsewhere
Setup React to handle all the UI (this is what I mentioned first). You should be able to setup React in such a way as you have pages/links and data all presented via React.
Setup your back-end to provide data to react via AJAX calls (on React you’d probably use something like fetch)
Update your back-end security with passport how you want/like. **The main goal is if you call your back-end “secured routes” you want passport/express to return network errors due to not being authenticated and nothing else. The reason is you want your back-end to just be able to tell React to handle the redirect.
Update React to handle said redirect on network errors, otherwise if there is no error show the data as required.
Like I said there is a lot of detail in all of these steps, but these are the general steps you need to take. The main thing that seems like is confusing you is the usage of pug+react, which will only make things worse without much gain.
Please provide more details on your problem(s) rather than ask for more explicit answers.
You have one long sentence on your problem that seems to mention multiple problems, specifying 1 method (ensureAuthentication), and 3 technologies (React, passport, pug).
I tried to assume a lot of what your problem is, but beyond you wanting to “ensure authentication” so you can “display data in a separate link for the user’s profile page” idk what else you see/want. It seems I was wrong in what I was assuming, so please provide more details.
Are you getting errors, if so what kind, where?
What behavior are you seeing in general?
Do you have a github of the course code? Or any code snippets of where you think the problem is?
What have you tried so far? (I assume you’ve tried a few things over the last few weeks)
any promising, or things you noticed during that time?
What resources were you following to build this, or did you just “build it” with what you knew?
I don’t see why someone has to do the course to help you. If they even might know anything related to this problem they should reply. Asking for help is rather cheap, giving it isn’t. I don’t suggest increasing “the bar of entry” much more otherwise you wont find any help and have to figure it out on your own. This advice doesn’t only go for this sort of problem, but rather every problem you will want help with.
So, I’m trying to take the program created with the course that demonstrates the passport local strategy, and replace the pug view with react.
Its true I haven’t done all of FCC, but there are people who have done a vast majority of the projects and challenges. If what your doing is a challenge/project, then providing the link would be beneficial to yourself so you can get more relevant help.
If anything you’ll give someone more context to those with more direct knowledge to this problem.
If what your doing is just based off a challenge but your going off on your own, then you should provide more details to help others so they can help you.
Hopefully someone (including me) will try to help, but you need to help yourself by giving more details.
i did provide all the details, but whatever bro. maybe if i give you my successfully completed glitch project (which i wouldn’t have to do if you did all the courses that this whole forum is for), you will see that my original post was descriptive enough. that’s neither here or there at this point, so here you go:
Pug is great, but nobody is hiring anybody to use Pug. Employers want MERN. How do i change this “redirect” b.s. to send actual potent information to the client so i can use React? What would that information be? What would i do with that information in React?
I ask this after 6 failed forum posts on 4 different websites, attempted use of 7 different code boiler-plates, 3 different ways of asking this question, a carpal tunnel inducing number of google and youtube video searches, and 2 months of being stuck on this, please help
Notice how the pug views are essentially html pages that just require some fancy view engine to use? Well, React is also a fancy html page, which just requires some fancy compiler (examples include webpack) to use.
So, everywhere you have a res.render(...) pointing to a pug file, the same can be done pointing to a compiled version of a React script. Now, I notice there is a react-view-engine, and would not be surprised if it did something very similar to the pug view engine. However, I do not think this is a standard way to view React scripts (the package only has 3 downloads per week).
In short, I suspect an approach like this would be decent:
React Router to control browser redirects
Expressjs routes activated (i cannot think of the word) by the Router get requests
Passportjs sessions ensuring authentication
Express response including a change of state telling your React component: “Hey, this user has/not been authenticated”. This is a backup of Express not immediately redirecting to /login upon failed authentication.
I hope this is understandable, even with my silly jargon.
Now, I would like to take a second to also remind all reading this that every responder (bar a few bots) is a human. So, let us please put our best foots forward with good intentions.
