1"use strict";(self.webpackChunkpixelpoint_website=self.webpackChunkpixelpoint_website||[]).push([[2496],{6473:function(e,t,o){o.r(t),o.d(t,{Head:function(){return w},default:function(){return u}});var n=o(8453),s=o(6540),r=o(4754);const i={annotations:r.hk,Code:r.Cy},c={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"dark-plus"};function a(e){const t=Object.assign({h2:"h2",a:"a",span:"span",p:"p",ul:"ul",li:"li",ol:"ol",code:"code"},(0,n.RP)(),e.components);return i||p("CH",!1),i.Code||p("CH.Code",!0),s.createElement(s.Fragment,null,s.createElement("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="dark-plus"] { --ch-t-colorScheme: var(--ch-0);--ch-t-foreground: var(--shiki-token-embed);--ch-t-background: var(--shiki-background-editor);--ch-t-editor-background: var(--shiki-background-editor);--ch-t-editor-foreground: var(--shiki-token-embed);--ch-t-tab-activeBackground: var(--shiki-background-editor);--ch-t-tab-inactiveBackground: var(--shiki-background-editor);--ch-t-tab-border: var(--shiki-menu-background);--ch-t-tab-activeBorder: var(--shiki-background-editor);--ch-t-editorGroupHeader-tabsBackground: var(--shiki-background-header);--ch-t-input-foreground: var(--shiki-token-embed);--ch-t-sideBar-foreground: var(--shiki-token-embed); }'}}),"\n",s.createElement(t.h2,{id:"overview"},s.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#overview"},s.createElement(t.span,{className:"icon icon-link"})),"Overview"),"\n",s.createElement(t.p,null,"Have you ever wondered how do companies like Slack, Netlify, Zoom, Facebook (and rest of FAANG for sure) gradually roll out new features just for some users? ð¤"),"\n",s.createElement(t.p,null,"Wonder no more! It is done via Feature Flags (or FF for short) and we're just about to dive into this concept."),"\n",s.createElement(t.p,null,"Feature Flags services work the following way. You define a list of features(eg. dark mode, horizontal login layout, design 2.0) and assign it to a group of users specifying conditions whether it should be enabled or disabled."),"\n",s.createElement(t.p,null,"Chances are that you've already used FF in your projects but wasn't aware of this. Did you store in a database some booleans that indicate whether particular user should have an access to a certain feature? If yes, then congratulations - you indeed have experience working with feature flags."),"\n",s.createElement(t.p,null,"Booleans in DB were good up to a certain point, but progress never stops and now we have much more flexible and dev friendly way to control feature presence. Let's take a look at feature flags services. FF services have the following bonuses:"),"\n",s.createElement(t.ul,null,"\n",s.createElement(t.li,null,"UI where you can define and manage features"),"\n",s.createElement(t.li,null,"Users segmentation"),"\n",s.createElement(t.li,null,"A/B testing"),"\n",s.createElement(t.li,null,"Flags analytics"),"\n",s.createElement(t.li,null,"Staged feature rollouts"),"\n",s.createElement(t.li,null,"SDKs for different languages/frameworks"),"\n"),"\n",s.createElement(t.p,null,"In this article, we are going to use ",s.createElement(t.a,{href:"https://github.com/Flagsmith/flagsmith"},"Flagsmith")," - open source feature flag and remote config service, but you can check commercial alternatives such as ",s.createElement(t.a,{href:"https://launchdarkly.com/"},"LaunchDarkly"),". Our goal is to learn how to start using feature flags in React and make the process of launching new functionality for users smoother."),"\n",s.createElement(t.p,null,"FF manipulation with Flagsmith can be done pretty much anywhere (frontend/backend/mobile platform). Let's take a look at the following schema:"),"\n",s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 696px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 41.95402298850575%; position: relative; bottom: 0; left: 0; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/04944f478af102e619c64bac6cbacd5c/09400/ff1.webp 174w,\n/static/04944f478af102e619c64bac6cbacd5c/3266f/ff1.webp 348w,\n/static/04944f478af102e619c64bac6cbacd5c/657d2/ff1.webp 696w,\n/static/04944f478af102e619c64bac6cbacd5c/e644e/ff1.webp 1044w,\n/static/04944f478af102e619c64bac6cbacd5c/8daba/ff1.webp 1392w,\n/static/04944f478af102e619c64bac6cbacd5c/b1218/ff1.webp 2000w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/webp"\n />\n <source\n srcset="/static/04944f478af102e619c64bac6cbacd5c/88093/ff1.png 174w,\n/static/04944f478af102e619c64bac6cbacd5c/91d18/ff1.png 348w,\n/static/04944f478af102e619c64bac6cbacd5c/871fd/ff1.png 696w,\n/static/04944f478af102e619c64bac6cbacd5c/4e07d/ff1.png 1044w,\n/static/04944f478af102e619c64bac6cbacd5c/aeb15/ff1.png 1392w,\n/static/04944f478af102e619c64bac6cbacd5c/9fabd/ff1.png 2000w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/04944f478af102e619c64bac6cbacd5c/871fd/ff1.png"\n alt=""\n title=""\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>'}}),"\n",s.createElement(t.p,null,"Let's break down what is happening here."),"\n",s.createElement(t.ol,null,"\n",s.createElement(t.li,null,"User requests the page"),"\n",s.createElement(t.li,null,"A certain side of your app (FE/BE) makes a call to Flagsmith service with user uuid"),"\n",s.createElement(t.li,null,"Flagsmith matches received uuid with the configuration of available features for this particular user and returns the info on that"),"\n",s.createElement(t.li,null,"App generates a page based on received feature info"),"\n"),"\n",s.createElement(t.p,null,"Definitely not a rocket science. Now to practice!\nGitHub logo Flagsmith / flagsmith\nOpen Source Feature Flagging and Remote Config Service. Host on-prem or use our hosted version at ",s.createElement(t.a,{href:"https://flagsmith.com/"},"https://flagsmith.com/")),"\n",s.createElement(t.h2,{id:"our-goal"},s.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#our-goal"},s.createElement(t.span,{className:"icon icon-link"})),"Our goal"),"\n",s.createElement(t.p,null,"We want to build pretty much standard dashboard app (sorry, no todos today) with authorization set up. We want to show certain feature components only to those users who opted-in for beta."),"\n",s.createElement(t.p,null,"React, Next.js, Next-Auth and beautiful dashboard components from Tailwind UI are going to help us building it."),"\n",s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 696px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 70.11494252873564%; position: relative; bottom: 0; left: 0; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/96d0567aad5d32360d46c996a010f9c5/09400/ff2.webp 174w,\n/static/96d0567aad5d32360d46c996a010f9c5/3266f/ff2.webp 348w,\n/static/96d0567aad5d32360d46c996a010f9c5/657d2/ff2.webp 696w,\n/static/96d0567aad5d32360d46c996a010f9c5/e644e/ff2.webp 1044w,\n/static/96d0567aad5d32360d46c996a010f9c5/8daba/ff2.webp 1392w,\n/static/96d0567aad5d32360d46c996a010f9c5/41d90/ff2.webp 2584w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/webp"\n />\n <source\n srcset="/static/96d0567aad5d32360d46c996a010f9c5/88093/ff2.png 174w,\n/static/96d0567aad5d32360d46c996a010f9c5/91d18/ff2.png 348w,\n/static/96d0567aad5d32360d46c996a010f9c5/871fd/ff2.png 696w,\n/static/96d0567aad5d32360d46c996a010f9c5/4e07d/ff2.png 1044w,\n/static/96d0567aad5d32360d46c996a010f9c5/aeb15/ff2.png 1392w,\n/static/96d0567aad5d32360d46c996a010f9c5/bcbc8/ff2.png 2584w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/96d0567aad5d32360d46c996a010f9c5/871fd/ff2.png"\n alt=""\n title=""\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>'}}),"\n",s.createElement(t.h2,{id:"pre-requirements"},s.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#pre-requirements"},s.createElement(t.span,{className:"icon icon-link"})),"Pre-requirements"),"\n",s.createElement(t.p,null,"Create a new app with Next.js, React and Next-Auth or clone this ",s.createElement(t.a,{href:"https://github.com/Flagsmith/flagsmith-js-client/tree/main/examples/nextjs-auth"},"sample repository")),"\n",s.createElement(t.p,null,"Additional links"),"\n",s.createElement(t.p,null,s.createElement(t.a,{href:"https://nextjs.org/docs/getting-started"},"Getting started with Next.js")),"\n",s.createElement(t.p,null,s.createElement(t.a,{href:"https://next-auth.js.org/getting-started/introduction"},"Getting started with nextauth")),"\n",s.createElement(t.p,null,s.createElement(t.a,{href:"https://flagsmith.com/"},"Then create an account")," in the cloud version of Flagsmith."),"\n",s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 696px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 63.793103448275865%; position: relative; bottom: 0; left: 0; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/b7e388e25517c45a86fa72b6487b5396/09400/ff3.webp 174w,\n/static/b7e388e25517c45a86fa72b6487b5396/3266f/ff3.webp 348w,\n/static/b7e388e25517c45a86fa72b6487b5396/657d2/ff3.webp 696w,\n/static/b7e388e25517c45a86fa72b6487b5396/e644e/ff3.webp 1044w,\n/static/b7e388e25517c45a86fa72b6487b5396/8daba/ff3.webp 1392w,\n/static/b7e388e25517c45a86fa72b6487b5396/02ab8/ff3.webp 3104w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/webp"\n />\n <source\n srcset="/static/b7e388e25517c45a86fa72b6487b5396/88093/ff3.png 174w,\n/static/b7e388e25517c45a86fa72b6487b5396/91d18/ff3.png 348w,\n/static/b7e388e25517c45a86fa72b6487b5396/871fd/ff3.png 696w,\n/static/b7e388e25517c45a86fa72b6487b5396/4e07d/ff3.png 1044w,\n/static/b7e388e25517c45a86fa72b6487b5396/aeb15/ff3.png 1392w,\n/static/b7e388e25517c45a86fa72b6487b5396/cdedc/ff3.png 3104w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/b7e388e25517c45a86fa72b6487b5396/871fd/ff3.png"\n alt=""\n title=""\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>'}}),"\n",s.createElement(t.h2,{id:"configure-flagsmith-environment"},s.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#configure-flagsmith-environment"},s.createElement(t.span,{className:"icon icon-link"})),"Configure Flagsmith environment"),"\n",s.createElement(t.p,null,"The configuration process is simple. Once you've signed up, create a new project. In Flagsmith you can define multiple environments per project, each environment keeps its own features/users/segments and API key."),"\n",s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 696px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 63.793103448275865%; position: relative; bottom: 0; left: 0; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/db513cbd8a04463d1a58cb136733cb2c/09400/ff4.webp 174w,\n/static/db513cbd8a04463d1a58cb136733cb2c/3266f/ff4.webp 348w,\n/static/db513cbd8a04463d1a58cb136733cb2c/657d2/ff4.webp 696w,\n/static/db513cbd8a04463d1a58cb136733cb2c/e644e/ff4.webp 1044w,\n/static/db513cbd8a04463d1a58cb136733cb2c/8daba/ff4.webp 1392w,\n/static/db513cbd8a04463d1a58cb136733cb2c/02ab8/ff4.webp 3104w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/webp"\n />\n <source\n srcset="/static/db513cbd8a04463d1a58cb136733cb2c/88093/ff4.png 174w,\n/static/db513cbd8a04463d1a58cb136733cb2c/91d18/ff4.png 348w,\n/static/db513cbd8a04463d1a58cb136733cb2c/871fd/ff4.png 696w,\n/static/db513cbd8a04463d1a58cb136733cb2c/4e07d/ff4.png 1044w,\n/static/db513cbd8a04463d1a58cb136733cb2c/aeb15/ff4.png 1392w,\n/static/db513cbd8a04463d1a58cb136733cb2c/cdedc/ff4.png 3104w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/db513cbd8a04463d1a58cb136733cb2c/871fd/ff4.png"\n alt=""\n title=""\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>'}}),"\n",s.createElement(t.p,null,'Let\'s create our first feature, we will name it - "pinned_projects". Beta users will be able to pin projects and see them.'),"\n",s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 696px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 70.11494252873564%; position: relative; bottom: 0; left: 0; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/17fb8be92695657bca9226ee605b27e0/09400/ff5.webp 174w,\n/static/17fb8be92695657bca9226ee605b27e0/3266f/ff5.webp 348w,\n/static/17fb8be92695657bca9226ee605b27e0/657d2/ff5.webp 696w,\n/static/17fb8be92695657bca9226ee605b27e0/e644e/ff5.webp 1044w,\n/static/17fb8be92695657bca9226ee605b27e0/8daba/ff5.webp 1392w,\n/static/17fb8be92695657bca9226ee605b27e0/41d90/ff5.webp 2584w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/webp"\n />\n <source\n srcset="/static/17fb8be92695657bca9226ee605b27e0/88093/ff5.png 174w,\n/static/17fb8be92695657bca9226ee605b27e0/91d18/ff5.png 348w,\n/static/17fb8be92695657bca9226ee605b27e0/871fd/ff5.png 696w,\n/static/17fb8be92695657bca9226ee605b27e0/4e07d/ff5.png 1044w,\n/static/17fb8be92695657bca9226ee605b27e0/aeb15/ff5.png 1392w,\n/static/17fb8be92695657bca9226ee605b27e0/bcbc8/ff5.png 2584w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/17fb8be92695657bca9226ee605b27e0/871fd/ff5.png"\n alt=""\n title=""\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>'}}),"\n",s.createElement(t.p,null,"Next step we need to install ",s.createElement(t.code,null,"flagsmith-react")," package"),"\n",s.createElement(i.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"npm ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"i flagsmith-react",props:{style:{color:"var(--shiki-token-string)"}}}]}],lang:"bash"},annotations:[]}]}),"\n",s.createElement(t.p,null,"As an initial step, we will wrap our _app.js with FlagsmithProvider and pass Flagsmith API key, which we can get from the Settings page in Flagsmith UI. FlagsmithProvider will allow to use useFlagsmith hook and pass the state to underlying components."),"\n",s.createElement(i.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"import ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"Auth ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"from ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"'components/auth'",props:{style:{color:"var(--shiki-token-string)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"import",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" { ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"Provider ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"as ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"SessionProvider",props:{style:{color:"var(--shiki-color-text)"}}},{content:" } ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"from ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"'next-auth/client'",props:{style:{color:"var(--shiki-token-string)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"import",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" { ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"FlagsmithProvider",props:{style:{color:"var(--shiki-color-text)"}}},{content:" } ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"from ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"'flagsmith-react'",props:{style:{color:"var(--shiki-token-string)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"import ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"'../styles/globals.css'",props:{style:{color:"var(--shiki-token-string)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"export default function ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"MyApp",props:{style:{color:"var(--shiki-token-function)"}}},{content:"({ ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"Component",props:{style:{color:"var(--shiki-color-text)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"pageProps",props:{style:{color:"var(--shiki-color-text)"}}},{content:" }) {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" return",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" (",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" <",props:{style:{color:"var(--shiki-color-text)"}}},{content:"FlagsmithProvider ",props:{style:{color:"var(--shiki-token-constant)"}}},{content:"environmentId",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"{process",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"env",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"NEXT_PUBLIC_FLAGSMITH_API_KEY",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"}>",props:{style:{color:"var(--shiki-color-text)"}}}]},{tokens:[{content:" <",props:{style:{color:"var(--shiki-color-text)"}}},{content:"SessionProvider ",props:{style:{color:"var(--shiki-token-constant)"}}},{content:"session",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"{pageProps",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"session}>",props:{style:{color:"var(--shiki-color-text)"}}}]},{tokens:[{content:" {Component",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"auth ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"?",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" (",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" <",props:{style:{color:"var(--shiki-color-text)"}}},{content:"Auth",props:{style:{color:"var(--shiki-token-constant)"}}},{content:">",props:{style:{color:"var(--shiki-color-text)"}}}]},{tokens:[{content:" <",props:{style:{color:"var(--shiki-color-text)"}}},{content:"Component ",props:{style:{color:"var(--shiki-token-constant)"}}},{content:"{",props:{style:{color:"var(--shiki-color-text)"}}},{content:"...",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"pageProps} />",props:{style:{color:"var(--shiki-color-text)"}}}]},{tokens:[{content:" </",props:{style:{color:"var(--shiki-color-text)"}}},{content:"Auth",props:{style:{color:"var(--shiki-token-constant)"}}},{content:">",props:{style:{color:"var(--shiki-color-text)"}}}]},{tokens:[{content:" ) ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:":",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" (",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" <",props:{style:{color:"var(--shiki-color-text)"}}},{content:"Component ",props:{style:{color:"var(--shiki-token-constant)"}}},{content:"{",props:{style:{color:"var(--shiki-color-text)"}}},{content:"...",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"pageProps} />",props:{style:{color:"var(--shiki-color-text)"}}}]},{tokens:[{content:" )",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"}",props:{style:{color:"var(--shiki-color-text)"}}}]},{tokens:[{content:" </",props:{style:{color:"var(--shiki-color-text)"}}},{content:"SessionProvider",props:{style:{color:"var(--shiki-token-constant)"}}},{content:">",props:{style:{color:"var(--shiki-color-text)"}}}]},{tokens:[{content:" </",props:{style:{color:"var(--shiki-color-text)"}}},{content:"FlagsmithProvider",props:{style:{color:"var(--shiki-token-constant)"}}},{content:">",props:{style:{color:"var(--shiki-color-text)"}}}]},{tokens:[{content:" );",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"}",props:{style:{color:"var(--shiki-token-embed)"}}}]}],lang:"jsx"},annotations:[]}]}),"\n",s.createElement(t.p,null,s.createElement(t.code,null,"FlagsmithProvider")," will initialise Flagsmith javascript client under the hood and you will be able to start getting flags declared in the UI. But it does not make too much sense unless we get user-specific flags. To let Flagsmith know which user requests flags, we need to i
1dentify him. The perfect place for this Auth component, that responsible for checking user session and redirecting users to the sign-in page in case it's expired."),"\n",s.createElement(i.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"import",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" { ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"useSession",props:{style:{color:"var(--shiki-color-text)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"signIn",props:{style:{color:"var(--shiki-color-text)"}}},{content:" } ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"from ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"'next-auth/client'",props:{style:{color:"var(--shiki-token-string)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"import",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" { ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"useEffect",props:{style:{color:"var(--shiki-color-text)"}}},{content:" } ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"from ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"'react'",props:{style:{color:"var(--shiki-token-string)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"import",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" { ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"useFlagsmith",props:{style:{color:"var(--shiki-color-text)"}}},{content:" } ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"from ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"'flagsmith-react'",props:{style:{color:"var(--shiki-token-string)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"export default function ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"Auth",props:{style:{color:"var(--shiki-token-function)"}}},{content:"({ ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"children",props:{style:{color:"var(--shiki-color-text)"}}},{content:" }) {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" const",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" { ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"identify",props:{style:{color:"var(--shiki-token-operator)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"isIdentified",props:{style:{color:"var(--shiki-token-operator)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"getTrait",props:{style:{color:"var(--shiki-token-operator)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"setTrait",props:{style:{color:"var(--shiki-token-operator)"}}},{content:" } ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"useFlagsmith",props:{style:{color:"var(--shiki-token-function)"}}},{content:"();",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" const",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" [",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"session",props:{style:{color:"var(--shiki-token-operator)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"loading",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"] ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"useSession",props:{style:{color:"var(--shiki-token-function)"}}},{content:"();",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"isUser ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"= !!",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"session",props:{style:{color:"var(--shiki-color-text)"}}},{content:"?.",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"user",props:{style:{color:"var(--shiki-color-text)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" // Identify user and set email trait if does not exist",props:{style:{color:"var(--shiki-token-comment)"}}}]},{tokens:[{content:" const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"identifyUser ",props:{style:{color:"var(--shiki-token-function)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"async",props:{style:{color:"var(--shiki-token-operator)"}}},{content:" (",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"id",props:{style:{color:"var(--shiki-color-text)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"email",props:{style:{color:"var(--shiki-color-text)"}}},{content:") ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"=>",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" await ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"identify",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"id",props:{style:{color:"var(--shiki-color-text)"}}},{content:");",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"hasEmail ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"= !!",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"getTrait",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"'email'",props:{style:{color:"var(--shiki-token-string)"}}},{content:");",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" if",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" (",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"!",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"hasEmail",props:{style:{color:"var(--shiki-color-text)"}}},{content:") {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" setTrait",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"'email'",props:{style:{color:"var(--shiki-token-string)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"email",props:{style:{color:"var(--shiki-color-text)"}}},{content:");",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" }",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" };",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" useEffect",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(() ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"=>",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" if",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" (",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"loading",props:{style:{color:"var(--shiki-color-text)"}}},{content:") ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"return",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"; ",props:{style:{color:"var(--shiki-token-embed)"}}}
1,{content:"// Do nothing while loading",props:{style:{color:"var(--shiki-token-comment)"}}}]},{tokens:[{content:" if",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" (",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"!",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"isUser",props:{style:{color:"var(--shiki-color-text)"}}},{content:") ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"signIn",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(); ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"// If not authenticated, force log in",props:{style:{color:"var(--shiki-token-comment)"}}}]},{tokens:[{content:" }, [",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"isUser",props:{style:{color:"var(--shiki-color-text)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"loading",props:{style:{color:"var(--shiki-color-text)"}}},{content:"]);",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" useEffect",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(() ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"=>",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" if",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" (",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"isUser ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"&& !",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"isIdentified",props:{style:{color:"var(--shiki-color-text)"}}},{content:") {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" // In the example we don't save users in the database so we don't have id that should be used for identification",props:{style:{color:"var(--shiki-token-comment)"}}}]},{tokens:[{content:" // Instead we're going to use email as a trait and id",props:{style:{color:"var(--shiki-token-comment)"}}}]},{tokens:[{content:" identifyUser",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"session",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"user",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"email",props:{style:{color:"var(--shiki-color-text)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"session",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"user",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"email",props:{style:{color:"var(--shiki-color-text)"}}},{content:");",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" }",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" }, [",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"isIdentified",props:{style:{color:"var(--shiki-color-text)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"identify",props:{style:{color:"var(--shiki-color-text)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"session",props:{style:{color:"var(--shiki-color-text)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"isUser",props:{style:{color:"var(--shiki-color-text)"}}},{content:"]);",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" if",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" (",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"isUser",props:{style:{color:"var(--shiki-color-text)"}}},{content:") {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" return ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"children",props:{style:{color:"var(--shiki-color-text)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" }",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" // Session is being fetched, or no user.",props:{style:{color:"var(--shiki-token-comment)"}}}]},{tokens:[{content:" // If no user, useEffect() will redirect.",props:{style:{color:"var(--shiki-token-comment)"}}}]},{tokens:[{content:" return ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"<",props:{style:{color:"var(--shiki-color-text)"}}},{content:"div ",props:{style:{color:"var(--shiki-token-string)"}}},{content:"/>",props:{style:{color:"var(--shiki-color-text)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"}",props:{style:{color:"var(--shiki-token-embed)"}}}]}],lang:"jsx"},annotations:[]}]}),"\n",s.createElement(t.p,null,"Here you can see that we use ",s.createElement(t.code,null,"getTrait")," and ",s.createElement(t.code,null,"setTrait"),". Traits are simply key/value pairs that are associated with individual Identities. You can pass any additional information to the user, that later could be used for segmentation eg. current plan, opt-in for beta features or newsletters, etc."),"\n",s.createElement(t.p,null,"Let's create first segment and call it ",s.createElement(t.code,null,"beta_opt_in")," . Go to Segments â Create Segment. Here you also could define an expression based on the trait which will add users that match that condition to the segment. We can start from a simple one, such as if email has ",s.createElement(t.code,null,"[pixelpoint.io](http://pixelpoint.io)")," consider them as opted-in for beta features."),"\n",s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 696px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 70.11494252873564%; position: relative; bottom: 0; left: 0; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/eb114797af057906c57cbd41c336dfed/09400/ff6.webp 174w,\n/static/eb114797af057906c57cbd41c336dfed/3266f/ff6.webp 348w,\n/static/eb114797af057906c57cbd41c336dfed/657d2/ff6.webp 696w,\n/static/eb114797af057906c57cbd41c336dfed/e644e/ff6.webp 1044w,\n/static/eb114797af057906c57cbd41c336dfed/8daba/ff6.webp 1392w,\n/static/eb114797af057906c57cbd41c336dfed/41d90/ff6.webp 2584w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/webp"\n />\n <source\n srcset="/static/eb114797af057906c57cbd41c336dfed/88093/ff6.png 174w,\n/static/eb114797af057906c57cbd41c336dfed/91d18/ff6.png 348w,\n/static/eb114797af057906c57cbd41c336dfed/871fd/ff6.png 696w,\n/static/eb114797af057906c57cbd41c336dfed/4e07d/ff6.png 1044w,\n/static/eb114797af057906c57cbd41c336dfed/aeb15/ff6.png 1392w,\n/static/eb114797af057906c57cbd41c336dfed/bcbc8/ff6.png 2584w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/png"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/eb114797af057906c57cbd41c336dfed/871fd/ff6.png"\n alt=""\n title=""\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>'}}),"\n",s.createElement(t.p,null,"The final step is to add a check to our React component using ",s.createElement(t.code,null,'hasFeature("pinned_projects")'),"."),"\n",s.createElement(i.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"Home ",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" () ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"=>",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" const",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" { ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"hasFeature",props:{style:{color:"var(--shiki-token-operator)"}}},{content:" } ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"useFlagsmith",props:{style:{color:"var(--shiki-token-function)"}}},{content:"();",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" return",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" (",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" <>",props:{style:{color:"var(--shiki-color-text)"}}}]},{tokens:[{content:" <",props:{style:{color:"var(--shiki-color-text)"}}},{content:"main ",props:{style:{color:"var(--shiki-token-string)"}}},{content:"className",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:'"relative z-0 flex-1 overflow-y-auto focus:outline-none"',props:{style:{color:"var(--shiki-token-string)"}}},{content:">",props:{style:{color:"var(--shiki-color-text)"}}}]},{tokens:[{content:" <",props:{style:{color:"var(--shiki-color-text)"}}},{content:"div ",props:{style:{color:"var(--shiki-token-string)"}}},{content:"className",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:'"border-gray-200 border-b px-4 py-4 lg:px-8 sm:flex sm:items-center sm:justify-between sm:px-6"',props:{style:{color:"var(--shiki-token-string)"}}},{content:">",props:{style:{color:"var(--shiki-color-text)"}}}]},{tokens:[{content:" <",props:{style:{color:"var(--shiki-color-text)"}}},{content:"HomeHeader ",props:{style:{color:"var(--shiki-token-constant)"}}},{content:"/>",props:{style:{color:"var(--shiki-color-text)"}}}]},{tokens:[{content:" </",props:{style:{color:"var(--shiki-color-text)"}}},{content:"div",props:{style:{color:"var(--shiki-token-string)"}}},{content:">",props:{style:{color:"var(--shiki-color-text)"}}}]},{tokens:[{content:" {",props:{style:{color:"var(--shiki-color-text)"}}},{content:"hasFeature",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"'pinned_projects'",props:{style:{color:"var(--shiki-token-string)"}}},{content:") ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"&&",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" (",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" <",props:{style:{color:"var(--shiki-color-text)"}}},{content:"div ",props:{style:{color:"var(--shiki-token-string)"}}},{content:"className",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:'"mt-6 px-4 lg:px-8 sm:px-6"',props:{style:{color:"var(--shiki-token-string)"}}},{content:">",props:{style:{color:"var(--shiki-color-text)"}}}]},{tokens:[{content:" <",props:{style:{color:"var(--shiki-color-text)"}}},{content:"PinnedProjects ",props:{style:{color:"var(--shiki-token-constant)"}}},{content:"items",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"{pinnedProjects} />",props:{style:{color:"var(--shiki-color-text)"}}}]},{tokens:[{content:" </",props:{style:{color:"var(--shiki-color-text)"}}},{content:"div",props:{style:{color:"var(--shiki-token-string)"}}},{content:">",props:{style:{color:"var(--shiki-color-text)"}}}]},{tokens:[{content:" )",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"}",props:{style:{color:"var(--shiki-color-text)"}}}]},{tokens:[{content:" <",props:{style:{color:"var(--shiki-color-text)"}}},{content:"ProjectsTable ",props:{style:{color:"var(--shiki-token-constant)"}}},{content:"items",props:{style:{color:"var(--shiki-token-function)"}}},{content:"=",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"{projects} />",props:{style:{color:"var(--shiki-color-text)"}}}]},{tokens:[{content:" </",props:{style:{color:"var(--shiki-color-text)"}}},{content:"main",props:{style:{color:"var(--shiki-token-string)"}}},{content:">",props:{style:{color:"var(--shiki-color-text)"}}}]},{tokens:[{content:" </>",props:{style:{color:"var(--shiki-color-text)"}}}]},{tokens:[{content:" );",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"};",props:{style:{color:"var(--shiki-token-embed)"}}}]}],lang:"jsx"},annotations:[]}]}),"\n",s.createElement(t.p,null,"Here you go!"),"\n",s.createElement(t.p,null,"If you've been following along, by this time you should have a nice little pet project demonstrating a modern approach to feature flags. Congratulationsð"),"\n",s.createElement(t.p,null,"Don't hesitate to extend it or leverage the idea in your existing project."),"\n",s.createElement(t.p,null,"P.S. Further reading"),"\n",s.createElement(t.p,null,"In this article we just took a quick glance at Feature Flags and built a simple example app, but FF system is capable of much more. Check out:"),"\n",s.createElement(t.ul,null,"\n",s.createElement(t.li,null,"A/B testing"),"\n",s.createElement(t.li,null,"Feature flags analytics"),"\n",s.createElement(t.li,null,"Staged rollouts"),"\n"))}var l=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.RP)(),e.components);return t?s.createElement(t,e,s.createElement(a,e)):a(e)};function p(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}var k=o(2532),d=o(1021),h=o(545),m=o(9072),y=o(3669),b=o(9063),f=o(352),v=o(84);const g=e=>{let{data:{mdx:{author:t,frontmatter:o,fields:{slug:n}},allMdx:{nodes:r}},location:i,pageContext:{videoCovers:c},children:a}=e;return s.createElement(b.A,{headerTheme:"black",headerShowThemeButton:!0},s.createElement("article",{className:"safe-paddings pt-32 sm:pt-24"},s.createElement("div",{className:"container"},s.createElement("div",{className:"relative mx-auto max-w-[696px] xl:mx-0 xl:flex xl:max-w-none xl:justify-center xl:space-x-20 lg:space-x-8 md:block md:space-x-0"},s.createElement("div",{className:"xl:max-w-[696px] lg:max-w-[626px] md:max-w-none"},s.createElement(h.A,Object.assign({},o,{slug:n})),s.createElement(d.A,{content:a,videoCovers:c})),s.createElement(m.A,{author:t,readMorePosts:r,socialShareUrl:i.href})))),s.createElement(y.A,{withTopMargin:!0}))};function u(e){return s.createElement(g,e,s.createElement(l,e))}const w=e=>{let{data:{mdx:{frontmatter:{title:t,summary:o,ogImage:n}}}}=e;const r=(0,k.d)(n);return s.createElement(f.A,v.A.blogPost({title:t,description:o,ogImage:r}))}}}]); 2//# sourceMappingURL=component---src-templates-blog-post-jsx-content-file-path-content-posts-2021-07-20-how-to-hide-feature-a-and-show-feature-b-for-different-users-in-react-index-md-4612a781cede4bb3b9e6.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.