CODEWITHSUNDEEP
reactjsreduxgraphqlapolloapollo-client
rgdzv
rgdzv

Reputation: 505

Misunderstanding the process of JWT authentication

I create project using React + Redux + Apollo Client + Graphql

When we need to log in in our app we need to use token (saved in localStorage for example) which is put in the headers parameter like in the code below:

const client = new ApolloClient ({
 uri: 'http://localhost:4000/api',
 headers: {
  authorization: `Bearer ${localStorage.token}`,
 }, 
});

After request server verifies token and becomes aware who is the user.

My question: from where do we need to get token and put it to the headers parameter for log on (sign up) process? A new customer comes to our log on page, he has no token (in localStorage or somewhere else) at the beginning but server requires it in the requests. And if we remove headers parameter from our client, the log on process will proceed but server won't understand who is the current user.

Upvotes: 1

Views: 96

Answers (2)

rgdzv
rgdzv

Reputation: 505

Decision:

you need to check for token in localStorage and update the request if token exists

const client = new ApolloClient({
  uri: 'http://localhost:4000/api',
  request (operation) {
    const headers = {};
    const token = localStorage.getItem('token');
    if (token) headers.authorization = 'Bearer ' + token;
    operation.setContext({ headers });
  }
})

Upvotes: 0

Tim Biegeleisen
Tim Biegeleisen

Reputation: 520968

Typically the server would be the one issuing the JWT token, and this would happen during user login or maybe during account creation. For these particular calls, you should not be expecting the JWT in the header. Instead, the user would be passing credentials, such as username and password. For most other calls, it is appropriate to pass the JWT in the header of the request.

Keep in mind that the main purpose of the JWT is free the user from having to provide personal credentials during most requests. Instead, the user can just present a JWT, much as one would present a passport, to get access to your web services.

In response to your comments below, I would suggest that you keep the signup/registration process separate from the user-only area of your application. Here is a typical workflow:

  • Prospective user visits your site, and creates an account, by choosing a username and password, and possibly by providing certain other personal information
  • Your application creates an account, and then sends an email verification link to the user's email address. The server lands the user on a page which mentions all of this
  • The user opens the email, which contains a verification link, which when clicked will activate the account. Your application returns a web page which then asks the user to login.
  • Finally, the user logs in from the normal login page.

Note carefully here, that JWT were not at all involved in the signup process, nor do they need to be. The user JWT only needs to come into existence after the user actually logs in for the first time.

Upvotes: 1

Related Questions