CODEWITHSUNDEEP
javascriptnode.jsexpressvue.jspassport.js
Dallas
Dallas

Reputation: 101

Passport JS authentication on a Vue JS application

I just started learning web development and I don't fully understand authentication.

I wrote an API using Express JS and (unfortunately) decided to write my front end in a separate web application using Vue JS. I am now trying to add a login system using Passport JS and am realizing the drawbacks to separating my back end from my front end.

Where should I initialize Passport JS? My initial thought was to initialize it in my Vue application and get validation from my API for the username and password. However all the documentation is about initializing it back end.

Basically I'm just wondering what the typical architecture looks like for an application with separated back end and front end.

Upvotes: 6

Views: 1773

Answers (1)

Karl L
Karl L

Reputation: 1725

You set your authentications on the backend side. All your frontend does basically is to send request to the backend via API endpoints.

In a request to login scenario, your frontend will send a request to the backend usually sending data of username and password, then when received on the backend, it will be verified against the database and if passes through, the backend will send back a response with an Authorisation code, JWT token for example.

Then you will store that on your frontend in localStorage or Cookies (that would be another debate of which one is better to use).

Now once you have the auth token, every time you want to access a secured API endpoint, you may need to pass the Auth code with your request to the backend usually in the header so the backend can use that code as an Auth key to allow you to access pages/endpoints for logged or authorised users.

Upvotes: 3

Related Questions