diff --git a/docs/docs/sdk/configurations.md b/docs/docs/sdk/configurations.md new file mode 100644 index 000000000..4c4ac478f --- /dev/null +++ b/docs/docs/sdk/configurations.md @@ -0,0 +1,19 @@ +# Configuration + +| key | type | default | description | +| ------------------------- | ----------------- | -------------------------------------- | ----------- | +| endpoint | string | http://localhost:8080 | | +| redirectLogin | string | http://localhost:3000 | | +| redirectSignup | string | http://localhost:3000/signup | | +| redirectMagicLinkVerify | string | http://localhost:3000/magiclink-verify | | +| callbackUrl | string | http://localhost:3000/callback | | +| dateFormat | string | | | +| shortDateFormat | string | | | +| theme | 'dark' or 'light' | 'light' | | +| billing.successUrl | string | http://localhost:3000/success | | +| billing.cancelUrl | string | http://localhost:3000/cancel | | +| billing.cancelAfterTrial | boolean | true | | +| billing.showPerMonthPrice | boolean | false | | +| billing.supportEmail | string | '' | | +| billing.hideDecimals | boolean | false | | +| billing.tokenProductId | string | '' | | diff --git a/docs/docs/sdk/introduction.md b/docs/docs/sdk/introduction.md new file mode 100644 index 000000000..fa64840ce --- /dev/null +++ b/docs/docs/sdk/introduction.md @@ -0,0 +1,58 @@ +# Introduction + +Frontier SDK provides wrapper arround [Frontier Apis](/apis/frontier-administration-api) and React components which you can integrate in your web app for user and organization management. + +## Setup + +Install the sdk in your project. + +```sh +npm i @raystack/frontier +``` + +Import the `FrontierProvider` in the root of your project and wrap your application code with it. + +```javascript +import { FrontierProvider } from "@raystack/frontier/react"; + +const frontierConfig = {}; + +function App() { + return ( + + /* Your app code here */ + + ); +} +``` + +To access the frontier instance inside your application, import the `useFrontier` hook in your components. + +```javascript +import { useFrontier } from "@raystack/frontier/react"; + +export function DemoComponent() { + const { client } = useFrontier(); + const [userLoader, setUserLoader] = useState(true); + const [user, setUser] = useState(); + + useEffect(() => { + async function getCurrentUser() { + try { + setUserLoader(true); + const userResp = await client.frontierServiceGetCurrentUser(); + if (userResp?.data) { + setUseruser(userResp?.data?.user); + } + } catch (err) { + console.error(err); + } finally { + setUserLoader(false); + } + } + getCurrentUser(); + }, [client]); + + return
demo
; +} +``` diff --git a/docs/sidebars.js b/docs/sidebars.js index e96efe0a1..ee5afc0d9 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -122,6 +122,18 @@ module.exports = { require("./docs/apis/sidebar.js") ] }, + { + type: "category", + label: "SDK", + link: { + type: "doc", + id: "sdk/introduction", + }, + items: [ + "sdk/introduction", + "sdk/configurations", + ] + }, { type: "category", label: "Reference",