Skip to content

Commit af6fc7c

Browse files
chaomingchaoming
committed
updated installation instructions for core v1.2.0
1 parent 0bfb352 commit af6fc7c

File tree

2 files changed

+249
-10
lines changed

2 files changed

+249
-10
lines changed

‎content/core/getting-started/_index.md‎

Lines changed: 55 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,8 @@ Create `src/config.json`:
113113
"deleteAccount": "/delete-account",
114114
"signIn": "/signin",
115115
"signUp": "/signup",
116-
"resetPassword": "/reset-password"
116+
"resetPassword": "/reset-password",
117+
"firebaseActions": "/auth/action"
117118
},
118119
"socialLogin": {
119120
"google": false,
@@ -132,7 +133,7 @@ Create `src/config.json`:
132133
Create `src/App.tsx`:
133134

134135
```tsx
135-
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
136+
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
136137
import {
137138
AuthProvider,
138139
ConfigProvider,
@@ -143,9 +144,41 @@ import {
143144
SignUp,
144145
ResetPassword,
145146
Dashboard,
146-
Profile
147+
Profile,
148+
EditName,
149+
EditEmail,
150+
ChangePassword,
151+
DeleteAccount,
152+
DesktopMenuItems,
153+
MobileMenuItems,
154+
Logo,
155+
FirebaseAuthActions
147156
} from '@fireact.dev/core';
148157
import config from './config.json';
158+
import i18n from 'i18next';
159+
import { initReactI18next } from 'react-i18next';
160+
import LanguageDetector from 'i18next-browser-languagedetector';
161+
import en from './i18n/locales/en';
162+
import zh from './i18n/locales/zh';
163+
164+
// Initialize i18next
165+
i18n
166+
.use(LanguageDetector)
167+
.use(initReactI18next)
168+
.init({
169+
resources: {
170+
en: {
171+
translation: en
172+
},
173+
zh: {
174+
translation: zh
175+
}
176+
},
177+
fallbackLng: 'en',
178+
interpolation: {
179+
escapeValue: false
180+
}
181+
});
149182

150183
function App() {
151184
return (
@@ -154,14 +187,26 @@ function App() {
154187
<AuthProvider>
155188
<LoadingProvider>
156189
<Routes>
157-
<Route element={<AuthenticatedLayout />}>
158-
<Route path="/" element={<Dashboard />} />
159-
<Route path="/profile" element={<Profile />} />
190+
<Route element={
191+
<AuthenticatedLayout
192+
desktopMenuItems={<DesktopMenuItems />}
193+
mobileMenuItems={<MobileMenuItems />}
194+
logo={<Logo className="w-10 h-10" />}
195+
/>
196+
}>
197+
<Route path={config.pages.home} element={<Navigate to={config.pages.dashboard} />} />
198+
<Route path={config.pages.dashboard} element={<Dashboard />} />
199+
<Route path={config.pages.profile} element={<Profile />} />
200+
<Route path={config.pages.editName} element={<EditName />} />
201+
<Route path={config.pages.editEmail} element={<EditEmail />} />
202+
<Route path={config.pages.changePassword} element={<ChangePassword />} />
203+
<Route path={config.pages.deleteAccount} element={<DeleteAccount />} />
160204
</Route>
161-
<Route element={<PublicLayout />}>
162-
<Route path="/signin" element={<SignIn />} />
163-
<Route path="/signup" element={<SignUp />} />
164-
<Route path="/reset-password" element={<ResetPassword />} />
205+
<Route element={<PublicLayout logo={<Logo className="w-20 h-20" />} />}>
206+
<Route path={config.pages.signIn} element={<SignIn />} />
207+
<Route path={config.pages.signUp} element={<SignUp />} />
208+
<Route path={config.pages.resetPassword} element={<ResetPassword />} />
209+
<Route path={config.pages.firebaseActions} element={<FirebaseAuthActions />} />
165210
</Route>
166211
</Routes>
167212
</LoadingProvider>

‎content/saas/getting-started/_index.md‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,200 @@ service cloud.firestore {
166166
}
167167
```
168168

169+
## Basic Application Setup
170+
171+
Update `src/App.tsx`:
172+
173+
```tsx
174+
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
175+
import i18n from 'i18next';
176+
import { initReactI18next } from 'react-i18next';
177+
import LanguageDetector from 'i18next-browser-languagedetector';
178+
import en from './i18n/locales/en';
179+
import zh from './i18n/locales/zh';
180+
import enSaas from './i18n/locales/saas/en';
181+
import zhSaas from './i18n/locales/saas/zh';
182+
import {
183+
AuthProvider,
184+
ConfigProvider,
185+
LoadingProvider,
186+
PublicLayout,
187+
AuthenticatedLayout,
188+
SignIn,
189+
SignUp,
190+
ResetPassword,
191+
Profile,
192+
EditName,
193+
EditEmail,
194+
ChangePassword,
195+
DeleteAccount,
196+
Logo,
197+
FirebaseAuthActions
198+
} from '@fireact.dev/core';
199+
import {
200+
CreatePlan,
201+
Home,
202+
SubscriptionDashboard,
203+
SubscriptionLayout,
204+
SubscriptionDesktopMenu,
205+
SubscriptionMobileMenu,
206+
SubscriptionProvider,
207+
MainDesktopMenu,
208+
MainMobileMenu,
209+
Billing,
210+
SubscriptionSettings,
211+
ProtectedSubscriptionRoute,
212+
UserList,
213+
InviteUser,
214+
ChangePlan,
215+
CancelSubscription,
216+
ManagePaymentMethods,
217+
UpdateBillingDetails,
218+
TransferSubscriptionOwnership
219+
} from '@fireact.dev/saas';
220+
import config from './config.json';
221+
import saasConfig from './saasConfig.json';
222+
223+
// Initialize i18next
224+
i18n
225+
.use(LanguageDetector)
226+
.use(initReactI18next)
227+
.init({
228+
resources: {
229+
en: {
230+
translation: {
231+
...en,
232+
...enSaas
233+
}
234+
},
235+
zh: {
236+
translation: {
237+
...zh,
238+
...zhSaas
239+
}
240+
}
241+
},
242+
fallbackLng: 'en',
243+
interpolation: {
244+
escapeValue: false
245+
}
246+
});
247+
248+
// Combine paths from both config files
249+
const paths = {
250+
...config.pages,
251+
...saasConfig.pages
252+
};
253+
254+
// Combine configs and include combined paths
255+
const combinedConfig = {
256+
...config,
257+
...saasConfig,
258+
pages: paths
259+
};
260+
261+
function App() {
262+
return (
263+
<Router>
264+
<ConfigProvider config={combinedConfig}>
265+
<AuthProvider>
266+
<LoadingProvider>
267+
<Routes>
268+
<Route element={
269+
<AuthenticatedLayout
270+
desktopMenuItems={<MainDesktopMenu />}
271+
mobileMenuItems={<MainMobileMenu />}
272+
logo={<Logo className="w-10 h-10" />}
273+
/>
274+
}>
275+
<Route path={paths.home} element={<Navigate to={paths.dashboard} />} />
276+
<Route path={paths.dashboard} element={<Home />} />
277+
<Route path={paths.profile} element={<Profile />} />
278+
<Route path={paths.editName} element={<EditName />} />
279+
<Route path={paths.editEmail} element={<EditEmail />} />
280+
<Route path={paths.changePassword} element={<ChangePassword />} />
281+
<Route path={paths.deleteAccount} element={<DeleteAccount />} />
282+
<Route path={paths.createPlan} element={<CreatePlan />} />
283+
</Route>
284+
285+
<Route path={paths.subscription} element={
286+
<SubscriptionProvider>
287+
<SubscriptionLayout
288+
desktopMenu={<SubscriptionDesktopMenu />}
289+
mobileMenu={<SubscriptionMobileMenu />}
290+
logo={<Logo className="w-10 h-10" />}
291+
/>
292+
</SubscriptionProvider>
293+
}>
294+
<Route index element={
295+
<ProtectedSubscriptionRoute requiredPermissions={['access']}>
296+
<SubscriptionDashboard />
297+
</ProtectedSubscriptionRoute>
298+
} />
299+
<Route path={paths.users} element={
300+
<ProtectedSubscriptionRoute requiredPermissions={['admin']}>
301+
<UserList />
302+
</ProtectedSubscriptionRoute>
303+
} />
304+
<Route path={paths.invite} element={
305+
<ProtectedSubscriptionRoute requiredPermissions={['admin']}>
306+
<InviteUser />
307+
</ProtectedSubscriptionRoute>
308+
} />
309+
<Route path={paths.billing} element={
310+
<ProtectedSubscriptionRoute requiredPermissions={['admin']}>
311+
<Billing />
312+
</ProtectedSubscriptionRoute>
313+
} />
314+
<Route path={paths.settings} element={
315+
<ProtectedSubscriptionRoute requiredPermissions={['admin']}>
316+
<SubscriptionSettings />
317+
</ProtectedSubscriptionRoute>
318+
} />
319+
<Route path={paths.changePlan} element={
320+
<ProtectedSubscriptionRoute requiredPermissions={['owner']}>
321+
<ChangePlan />
322+
</ProtectedSubscriptionRoute>
323+
} />
324+
<Route path={paths.cancelSubscription} element={
325+
<ProtectedSubscriptionRoute requiredPermissions={['owner']}>
326+
<CancelSubscription />
327+
</ProtectedSubscriptionRoute>
328+
} />
329+
<Route path={paths.managePaymentMethods} element={
330+
<ProtectedSubscriptionRoute requiredPermissions={['owner']}>
331+
<ManagePaymentMethods />
332+
</ProtectedSubscriptionRoute>
333+
} />
334+
<Route path={paths.updateBillingDetails} element={
335+
<ProtectedSubscriptionRoute requiredPermissions={['owner']}>
336+
<UpdateBillingDetails />
337+
</ProtectedSubscriptionRoute>
338+
} />
339+
<Route path={paths.transferOwnership} element={
340+
<ProtectedSubscriptionRoute requiredPermissions={['owner']}>
341+
<TransferSubscriptionOwnership />
342+
</ProtectedSubscriptionRoute>
343+
} />
344+
</Route>
345+
346+
<Route element={<PublicLayout logo={<Logo className="w-20 h-20" />} />}>
347+
<Route path={paths.signIn} element={<SignIn />} />
348+
<Route path={paths.signUp} element={<SignUp />} />
349+
<Route path={paths.resetPassword} element={<ResetPassword />} />
350+
<Route path={config.pages.firebaseActions} element={<FirebaseAuthActions />} />
351+
</Route>
352+
</Routes>
353+
</LoadingProvider>
354+
</AuthProvider>
355+
</ConfigProvider>
356+
</Router>
357+
);
358+
}
359+
360+
export default App;
361+
```
362+
169363
## Cloud Functions Setup
170364

171365
Update your functions' `src/index.ts`:

0 commit comments

Comments
 (0)