JWT with Frontity

šŸ™‹Get Help
#20

Hi
I could verify that this plugin can be useful for your customers to authenticate to your React App, using JWT Authentication

1 Like
#21

Could you explain to me how to get the server token?
Thanks !

#22

Look in the USAGE section of their documentation: https://wordpress.org/plugins/jwt-authentication-for-wp-rest-api/

It looks like you have to use the '/jwt-auth/v1/token' with a POST request that contains the username and password.

You can use fetch to do the request. Import it from frontity.

#23

I think I would fetch the token into beforeSSR, right?

const before = async ({ libraries, actions }) => {
  libraries.source.handlers.push(tokenHandler);
  await actions.source.fetch('/fetch-token/')
};
...
actions: {
  theme: {
    beforeSSR: before,
...

that configuration is correct?

Should I be aware of problems with CORS?

#24

Yes, beforeSSR seems a good place to do so.

I donā€™t know if that plugin takes care of CORS so take a look at it and at the configuration of your WordPress.

#25

Are there any special considerations to take into account if the handler is in beforeSSR?
This is my handler:

import { fetch } from "frontity";

export const tokenHandler = {
  pattern: '/fetch-token/',
  func: async ({ state }) => {  
    const response = await fetch ( urlToFetch, {
      method: 'POST',
      headers: new Headers({
        'Content-Type': 'application/json'
      }),
      body: JSON.stringify({
        username: xxxxxxxxxxxxx,
        password: xxxxxxxxxxxxx
      })
    }
  );

  const data = await response.json();

  Object.assign(state.theme.token, { data });
  }
  }

Iā€™m getting an error:

EventSource's response has a MIME type ("application/json") that is not "text/event-stream". Aborting the connection.

#26

Iā€™m sorry, I told you that beforeSSR was right but this has to be client-side, so this would need to go on afterCSR. CSR stands for client-side rendering.

That seems like a problem not related with Frontity.

By the way, you donā€™t have to use a handler if you donā€™t want to. Handlers are only to match a URL with some data in the REST API and the URL /fetch-token/ doesnā€™t exist. You can just create an action that does the fetch and modifies the state by itself.

#27

Iā€™m not able to find an example on how to do this in the documentation. I need to authenticate in order to see private posts. Iā€™m trying to do a knowledge base with public and private articles and would appreciate any help in a good way to achieve that.

1 Like
#28

Hi @victorcarvalhosp, below is a function to get the token from the server.
With that token you can do restricted operations, such as viewing private posts.

I hope you find it useful :sunglasses:

fetchToken = () => {
    this.setState({
      isLoading: true,
    })
    fetch(Constants.apiUrl + 'jwt-auth/v1/token', {
      method: 'post',
      headers: new Headers({
        'Content-Type': 'application/json'
      }), 
      body: JSON.stringify({
        username: this.state.username,
        password: this.state.password
      })
    })
    .then(res => res.json())
    .then(data => this.setState({
        token: data.token,
        isLoading: false,
    }))
    .then( console.log('Done!') )
    
    .catch(error => console.log(error))
  }
2 Likes
#30

Can we get the JWT token beforeSSR?

#31

I think the best place to get the token is afterCSR, as @luisherranz says

this code is checked:

...
  actions: {
    theme: {
      afterCSR: async ({ state, libraries, actions }) => {
        if (state.frontity.platform === 'client') {
          if (undefined === state.theme.token) {
            actions.theme.fetchToken();
          }
        }
      },
      fetchToken
    },
  }
..------------------------------------
import { fetch } from 'frontity';

export const fetchToken = async ({ state }) => {
    const res = await fetch(
        `${state.source.api}/jwt-auth/v1/token`, {
            method: 'POST',
            headers: new Headers({
              'Content-Type': 'application/json'
            }),
            body: JSON.stringify({
              "username": state.theme.username,
              "password": state.theme.password
            }),
            redirect: 'follow'
        }
    );
    const body = await res.json();
    state.theme.token = body.token;

}
#32

we can get token in beforeSSR
here is code. how i have done it

fetch(url, {
    method: 'post',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
           username: this.state.username,
           password: this.state.password
    })
  })
   .then(res => res.json())
  .then(data => console.log(data)
  )
  .catch(error => console.log(error))
#33

I guess it depends on your needs.

What do you want to do with the token?

#34

i have used for fetching menus

#36

Ok. Thanks @mehul. Then you only need that in the server, right?

If you expose the username/password on the state itā€™s going to be sent to the client so thatā€™s not a good idea. It will also be part of your git repository. Even if the repository is not public, thatā€™s also not a good idea.

A common approach to add sensible data to an app is to use environment variables. You have a lot of info about how to do so in this topic: How to read Environment Variables

2 Likes
#37

A post was split to a new topic: Protected routes with Frontity

#38

could you show me how did this please i am trying to get custom post type

#39

HI @hugsaf2132

In order to help with your issue, can you please provide the info suggested here?

The more info you provide the better. Providing a repo or code-sandbox with your code is especially helpful to find solutions of technical issues with specific code

#41

How would I proceed with this? Iā€™d like to try it out.

#42

Here is a very basic implementation:

1 Like