Question.... to use TinaCMS with pages, and social login

Hi Tinacms Community, Greetings. :wave:

I m following the blog example of tinacms with strapi.

I have 2 questions.

  1. Can i enable tinacms edit option for only to few nextjs pages? How to restrict this?
  2. Currently the example uses email-password for strapi login, how to extend it with social login providers?

Any helpful pointer on this?

Thanks in advance.

Hey there!

Using providers with Strapi hasn’t been fully thought out, but we should have enough in place to make it possible and give you a starting point.

Initial Config

  1. You need to go into the source code of your Strapi server and modify /config/server.js to manually specify your server’s url. After doing that, my <strapi_server>/config/server.js looks like
module.exports = ({ env }) => ({
  host: env("HOST", "0.0.0.0"),
  port: env.int("PORT", 1337),
  url: "http:/localhost:1337",
});
  1. Then you need to create an OAuth app with your auth provider

  2. You’ll take your client and secret key and enable your provider within Strapi

Code Changes

  1. Create a new API endpoint to accept the JWT from Strapi and set it in a cookie. I did this by creating pages/api/github-auth.js
import { STRAPI_JWT } from "react-tinacms-strapi";
import axios from "axios";  // you could just use fetch instead
import querystring from "querystring";

export default (req, res) => {
  // we need to take the query params that we're getting from github and post them
  // back to strapi in order to get the JWT
  const queryString = querystring.stringify(req.query);

  axios
    .get(`http://localhost:1337/auth/github/callback?${queryString}`)
    .then((response) => {
      res.setHeader("Set-Cookie", `${STRAPI_JWT}=${response.data.jwt};Path=/`);
      res.status(200).end();
    })
    .catch((error) => {
      res.status(400).json({ error });
    });
};
  1. In your _app.js file get rid of the StrapiProvider, right now it defaults to using the other auth and we don’t want that.
  return (
    <TinaProvider cms={cms}>
      <EditButton />
      <Component {...pageProps} />
    </TinaProvider>
  );
}
  1. To get this working, I’ll change the edit button to start provider authentication on click by using the startProviderAuth method that we have on the StrapiClient.
export const EditButton = () => {
  const cms = useCMS();
  return (
    <button
      onClick={() =>
        cms.api.strapi.startProviderAuth({
          provider: "github", // or 'facebook', 'gitlab', 'google' or anything else Strapi offers
          onAuthSuccess: () => { 
            cms.enable();
            enterEditMode();
     
          },
        })
      }
    >
      {cms.enabled ? `Stop Editing ` : `Edit this Site `}
    </button>
  );
};

Hopefully, this example can point you in the right direction.

3 Likes

@brent, Thanks, will try this…
Appreciate … this really helps. :+1: