dijonmusters / courses Goto Github PK

Hi Jon,

Great series and really enjoyed how methodical you were in the series. While reading the section Problem 2: Our API Route to deal with authentication is not authenticated! at https://jonmeyers.io/blog/social-login-with-github-and-auth0-rules I wondered if there is an alternative to such approach. Mainly: can we use the JWTs that we're all used to?

Having a static secret has pros and cons.

Pros: easy to manage, little code, pretty straightforward.
Cons: it's sent over the wire, vulnerable if intercepted as it's static.

I came across this Auth0's suggestion to create a M2M for Rules:
https://community.auth0.com/t/how-do-i-call-my-api-from-a-rule/41309

So after creating the M2M auth0 client, the rule might look similar to:

async function (user, context, callback) {
  try {
    user.app_metadata = user.app_metadata || {};

    if (!user.app_metadata.localUserCreated) {

      const accessToken = (await request.post('https://whateverurl-of-your-auth0-project.us.auth0.com/oauth/token', {
        headers: {
          'content-type': 'application/json',
          accept: 'application/json',
        },
        body: {
          client_id: configuration.rules_machine_client_id,
          client_secret: configuration.rules_machine_client_secret,
          audience: 'https://some-audience-url.com',
          grant_type: 'client_credentials',
        }
      })).body.accessToken;

      await request.post('https://0d4d01c96799.au.ngrok.io/api/auth/hooks', {
        headers: { 'Authorization': `Bearer ${accessToken}` },
        body: JSON.stringify({
          email: user.email,
        })
      });
      user.app_metadata.localUserCreated = true;
      await auth0.users.updateAppMetadata(user.user_id, user.app_metadata);
    }
    callback(null, user, context);
  } catch (err) {
    callback(err);
  }
}

It might well be that a more involved approach is out of scope of the article, in which case, feel free to ignore the issue. Just thought it might be worth putting a friendly note for less experienced reader about the caveats.

See https://tailwindcss.com/docs/guides/nextjs#include-tailwind-in-your-css

You've imported it twice once using import 'tailwind/tailwind.css'; & next time using @tailwind. If you check the docs above, it only has to be imported once in either way.

Personally, I prefer using @tailwind so I can add other styles not yet supported by Tailwind.

You can change the Tailwind part on → https://jonmeyers.io/blog/tech-stack-and-initial-project-setup

Nice write up btw 👏