How to get accesstoken client-side

[BjoernRave]

So I am using graphql and instantiating apollo-client in a hoc wrapped around app.js. Here I am passing the accessToken I get from const session = await auth0.getSession(ctx.ctx.req) as Header to my client so it gets send to the server and the request can be verified. Now I get the error: Error in error page getInitialProps: Error: "The getSession method can only be used from the server side" So I am wondering how I should be able to get the accessToken on the client side. I guess I could store the accessToken on a cookie, but that wouldnt feel right

[vgrafe]

I wish I had a better solution, but could not find one and ended up storing the idToken in a cookie.

[matthieuh]

I would suggest you to avoid using the idToken on the client side. If you need to authentify http/ws calls I would suggest you to proxify your calls putting the bearer token on server side. For example you can have a pages/api/fetch.js page using http-proxy-middleware.

[vgrafe]

That's a good suggestion. I hope I can put some time in fixing my public repo soon. Thanks!

[matthieuh]

@vgrafe if you struggle on this feel free to ask :) I have some code samples

[vgrafe]

@matthieuh I'd love to see that! I can't spend lots of time on this repo these days, and since it has a few stars I'd love some help providing best practices rather than something that is not recommended. Feel free to post on my repo's issue or here.

[matthieuh]

Hello @vgrafe I have a pages/api/graphql.js file with something like this:

import proxy from 'http-proxy-middleware';
import express from 'express';
import auth0 from '../../utils/auth0';

const app = express();

app.use('*', async (req, _, next) => {
  const session = = await auth0.getSession(req);

  return proxy({
    target: process.env.GRAPHQL_URL,
    changeOrigin: true,
    proxyTimeout: 5000,
    secure: false,
    headers: {
      Connection: 'keep-alive'
    },
    pathRewrite: {
      '^/api/graphql': ''
    },
    onError: (err, req, res) => {
      console.log('err', err, res.data);
      res.writeHead(500, {
        'Content-Type': 'text/plain'
      });
      res.end(
        'Something went wrong. And we are reporting a custom error message.'
      );
    },
    onProxyReq: async (proxyReq, req, res) => {
      if (session) {
        proxyReq.setHeader('Authorization', `Bearer ${session.idToken}`);
      }

      if (req.body) {
        let bodyData = JSON.stringify(req.body);
        // incase if content-type is application/x-www-form-urlencoded -> we need to change to application/json
        proxyReq.setHeader('Content-Type', 'application/json');
        proxyReq.setHeader('Content-Length', Buffer.byteLength(bodyData));
        // stream the content
        proxyReq.write(bodyData);
      }
    }
  })(req, _, next);
});

export default app;

Then you just need to call api/graphql as graphql endpoint without taking care at all of the bearer token.

Something to note is that this proxy will not work with subscription which are using websocket. So to make it works I added an other file pages/api/graphql-ws.js with

import proxy from 'http-proxy-middleware';
import express from 'express';
import auth0 from '../../utils/auth0';

const app = express();

app.use('*', async (req, _, next) => {
  const session = await auth0.getSession(req);

  const wsProxy = proxy({
    target: process.env.GRAPHQL_URL,
    changeOrigin: true,
    logLevel: 'debug',
    ws: true,
    timeout: 30000,
    proxyTimeout: 30000,
    pathRewrite: {
      '^/api/graphql-ws': ''
    },
    onProxyReqWs: proxyReq => {
      if (session) {
        proxyReq.setHeader('Authorization', `Bearer ${session.idToken}`);
      }
    }
  });

  app.on('upgrade', wsProxy.upgrade);

  return wsProxy(req, _, next);
});

export default app;`

[shansmith01]

Thanks for the above code @matthieuh. Any chance you can provide the client side code?

[vgrafe]

Wow! Thank you. I'll update my repo sometime this week.

[Pytal]

@matthieuh does this work with the Next.js serverless target?

[jagyas]

Hi,
I have also created one proxy for graphql.
I have api/graphql.js file with below gist code:

https://gist.github.com/jagyas/a120fa57349e2f7f854f97d18c4dfd87

I have created above code mainly for hiding Graphql endpoint.

If we will fetch session in same code and then pass it to graphql endpoint, I think it will also help to hide idToken.

Let me know your views @vgrafe @matthieuh @Pytal

[Widcket]

Hi everyone, with the new v1.0.0-beta.0 release we have included a way to use an access token from the frontend. However, keep in mind that it is less secure than proxying the requests through API routes, as the access token could be stolen via XSS.
Please read Comparison with auth0-react, as auth0-react might be a better fit for your project if that's the primary way of fetching data in your application.

[mathiasfc]

Hi everyone, with the new v1.0.0-beta.0 release we have included a way to use an access token from the frontend. However, keep in mind that it is less secure than proxying the requests through API routes, as the access token could be stolen via XSS.
Please read Comparison with auth0-react, as auth0-react might be a better fit for your project if that's the primary way of fetching data in your application.

Sorry, I couldn't access the token on the client side, could you provide an example? ty

[adamjmcgrath]

Hi @mathiasfc - we've removed the advice on the recommendation of our security experts, but you can still find it here #245

Also checkout #201 (comment)