How to decode phoenix token client side?

Phoenix Forum Questions / Help
1

Hello everyone,

I have been replacing Guardian jwt by Phoenix.Token.

While the phoenix side is ok and test are passing well, I would like to know if it is possible to decode the Phoenix.Token on the javascript frontend?

In particular, I would like to check if the token is still valid.

I used to do this with jwt.

import jwtDecode from 'jwt-decode'

class AuthService {
  ...
  isLoggedIn() {    
    return (
      !!this.loadToken() &&
      this.isValidExpiry()
    );
  }
  
  getPayload(jwt = null) {
    let token = jwt || this.loadToken();
    if (!!token) {
      return jwtDecode(token);
    } else {
      return {}
    }
  }

  getExpiryDate() {
    return new Date((this.getPayload().exp)*1000);
  }
  
  // Private
  isValidExpiry() {
    let nowDate = new Date(Date.now());
    return this.getExpiryDate() >= nowDate;
  }
}

In particular jwtDecode(token)

What would be the javascript equivalent code for?

Phoenix.Token.verify(GoServerWeb.Endpoint, @salt, token, max_age: @max_age)

Thanks for taking time

2

This library might help

Edit: I just re-read your post. Validating on the client side would involve exposing your secret. Decoding to get the values might be possible, but you need to make a server-side call to validate.

2 Likes
3

When I try this on the phoenix token, I get

console.log(jwtDecode(jwt));

InvalidTokenError: Invalid token specified: Unexpected token in JSON at position 0

That was working with guardian jwt, but not with Phoenix.Token

4

I misunderstood your question. The library I posted only works for JWT which you are moving away from.

Verify uses the secret_key_base configured in your Endpoint which you should not expose to your front-end (this would compromise your app’s security). It’s easier to make a new endpoint, send the token to the endpoint and validate server-side and return the decoded values.

According to this thread: How is Phoenix.Token different from JWT?

Phoenix.Token is base64 encoded erlang terms. You could try and decode using a base64 decoder and see what the result is: https://www.base64decode.org/ but even then you will have to parse the Erlang terms into JSON.

5

Thank You for the info. I tried to base64 decode, but I got a cryptic string in return.

I will check your links.

and yes, I am trying to replace jwt.

6

If you need client-side decoding, Phoenix.Token isn’t your best choice, and something rather like JWT would be what you need. An alternative would be to expose and endpoint to ping for token verification which may or may not fit your needs.

6 Likes
7

Thank You for the explanation. Now I know more about Phoenix.Token vs Jwt. :slight_smile:

8

Yep, precisely all of the above! ^.^

Phoenix.Token is perfect and best when you are passing information to servers you fully control (or just back to the same server). JWT is used for communication with things that you do not control, and the user’s browser is definitely not something that you control. ^.^

3 Likes