react-figma-login

React component for simple OAuth with Figma

Usage no npm install needed!

<script type="module">
  import reactFigmaLogin from 'https://cdn.skypack.dev/react-figma-login';
</script>

README

react-figma-login

npm npm bundle size npm

React component for a simple OAuth login with Figma.

DEMO HERE

image

🚀 Get Started

Follow these steps to start using React Figma Login:

  1. Installation

    # with npm
npm i react-figma-login

# with yarn
yarn add react-figma-login

  2. Import and configure component.

    import React from "react";
import FigmaLogin from "react-figma-login";

export default props => {
  const authHandler = (err, data) => {
    console.log(err, data);
  };

  return (
    <FigmaLogin
      authCallback={authHandler}
      clientId={CLIENT_ID}
      clientSecret={CLIENT_SECRET}
      redirectUri={REDIRECT_URI}
      scope={SCOPE}
    />
  );
};

  3. Find more info about keys and OAuth apps in Figma official docs

📖 API

Property Type Default Description
authCallback function required Callback function which takes two arguments (error, authData)
clientId string required Client ID of your OAuth App
clientSecret string required Client Secret of your OAuth App
redirectUri string required Authorization callback URL of your OAuth App
scope string required Scope that will be requested. For now only "file_read" is available.
buttonTheme enum("light", "light_short", "dark", "dark_short") "light" Button style theme that based on Figma styles
className string "" Custom class name

📝 License

MIT