Merge pull request #106 from Shaoe/featAuth

Authentication

.env.development

@@ -1,3 +1,11 @@
 VITE_HASURA_GRAPHQL_ENDPOINT = "https://test.hasura.magicsk.eu/v1/graphql"
 VITE_HASURA_GRAPHQL_SECRET = "c2akHldMLELW7z5RFUMu8AnUxyHAXAThFzW5JZK7HejgMjG5cn7kr1m0C0Vefdbc"
-VITE_INJECT_MODE = "devServer"
+VITE_INJECT_MODE = "jamstack"
+
+#VITE_AUTH_MODE = "admin_secret" # "token" | "admin_secret"
+
+VITE_AUTH_PROVIDER = "firebase"
+
+VITE_FIREBASE_API_KEY = "AIzaSyBQrfw2BoTJL7SEFwP7fnNih6FNxegw7QY"
+VITE_FIREBASE_DOMAIN = "dev-iteria.firebaseapp.com"
+VITE_FIREBASE_PERSISTANCE="LOCAL_DB" # NONE | LOCAL_BROWSER | LOCAL_DB | SESSION

.env.production

@@ -1,3 +1,12 @@
 VITE_HASURA_GRAPHQL_ENDPOINT = "https://test.hasura.magicsk.eu/v1/graphql"
 VITE_HASURA_GRAPHQL_SECRET = "c2akHldMLELW7z5RFUMu8AnUxyHAXAThFzW5JZK7HejgMjG5cn7kr1m0C0Vefdbc"
-VITE_INJECT_MODE = "jamstack"
+VITE_INJECT_MODE = "jamstack"
+
+#VITE_AUTH_MODE = "admin_secret" # "token" | "admin_secret"
+
+
+VITE_AUTH_PROVIDER = "firebase"
+
+VITE_FIREBASE_API_KEY = "AIzaSyBQrfw2BoTJL7SEFwP7fnNih6FNxegw7QY"
+VITE_FIREBASE_DOMAIN = "dev-iteria.firebaseapp.com"
+VITE_FIREBASE_PERSISTANCE="LOCAL_DB" # NONE | LOCAL_BROWSER | LOCAL_DB | SESSION

package.json

@@ -61,4 +61,4 @@
     "typescript": "4.5.4",
     "vite": "2.8.6"
   }
-}
+}

src/App.tsx

@@ -6,7 +6,9 @@ import {
   I18nProvider,
   useLocale,
   DataContext,
-  GraphqlcodegenDataProvider
+  GraphqlcodegenDataProvider,
+  authExchange,
+  useClient
 } from '@iteria-app/component-templates'
 import '../src/mixins/chartjs'
 import { theme } from './theme'
@@ -16,28 +18,38 @@ import * as graphqlgen from './generated/graphql'
 import introspection from './generated/introspect.json'
 import {
   cacheExchange,
+  ClientOptions,
   createClient,
   debugExchange,
   fetchExchange,
-  Provider as UrqlProvider,
+  Provider as UrqlProvider
 } from 'urql'
 
 const graphqlcodegenDataProvider = new GraphqlcodegenDataProvider(
   graphqlgen,
   introspection.__schema as any
 )
 
-const client = createClient({
-  url: import.meta.env.VITE_HASURA_GRAPHQL_ENDPOINT as string,
-  exchanges: [debugExchange, fetchExchange],
-  fetchOptions: {
-    headers: {
-      'x-hasura-admin-secret': import.meta.env.VITE_HASURA_GRAPHQL_SECRET as string
+const App = () => {
+  const clientOptions: ClientOptions = {
+    url: import.meta.env.VITE_HASURA_GRAPHQL_ENDPOINT as string,
+    exchanges: [debugExchange, authExchange(), fetchExchange]
+    //requestPolicy: 'cache-and-network',
+  }
+  const superClient = createClient({
+    ...clientOptions,
+    fetchOptions: {
+      headers: {
+        'x-hasura-admin-secret': import.meta.env
+          .VITE_HASURA_GRAPHQL_SECRET as string
+      }
     }
-  },
-})
+  })
+
+  let client = createClient(clientOptions)
+
+  if (import.meta.env.VITE_AUTH_MODE === 'admin_secret') client = superClient
 
-const App = () => {
   const routing = useRoutes(routes)
   const locale = useLocale()
   const messagesObject = messages(locale)
@@ -55,7 +67,7 @@ const App = () => {
 
 App.propTypes = {
   locale: PropTypes.string,
-  messages: PropTypes.object,
+  messages: PropTypes.object
 }
 
 export default App

src/layouts/DashboardLayout/TopBar.tsx

@@ -20,20 +20,20 @@ interface AppBarProps extends MuiAppBarProps {
 }
 
 const AppBar = styled(MuiAppBar, {
-  shouldForwardProp: (prop) => prop !== 'open',
+  shouldForwardProp: (prop) => prop !== 'open'
 })<AppBarProps>(({ theme, open }) => ({
   transition: theme.transitions.create(['margin', 'width'], {
     easing: theme.transitions.easing.sharp,
-    duration: theme.transitions.duration.leavingScreen,
+    duration: theme.transitions.duration.leavingScreen
   }),
   ...(open && {
     width: `calc(100% - ${drawerWidth}px)`,
     marginLeft: `${drawerWidth}px`,
     transition: theme.transitions.create(['margin', 'width'], {
       easing: theme.transitions.easing.easeOut,
-      duration: theme.transitions.duration.enteringScreen,
-    }),
-  }),
+      duration: theme.transitions.duration.enteringScreen
+    })
+  })
 }))
 
 const TopBar = ({
@@ -69,7 +69,7 @@ const TopBar = ({
 
 TopBar.propTypes = {
   className: PropTypes.string,
-  onMobileNavOpen: PropTypes.func,
+  onMobileNavOpen: PropTypes.func
 }
 
 export default TopBar

src/main.tsx

@@ -8,14 +8,39 @@ import {
   LocaleContextProvider,
   ErrorBoundary,
   ThemeContextProvider,
+  AuthContextProvider,
+  initializeProvider
 } from '@iteria-app/component-templates'
 
+const provider = import.meta.env.VITE_AUTH_PROVIDER as string
+const firebaseAuthDomain = import.meta.env.VITE_FIREBASE_DOMAIN as string
+const firebaseApiKey = import.meta.env.VITE_FIREBASE_API_KEY as string
+const persistance = import.meta.env.VITE_FIREBASE_PERSISTANCE as string
+const config = {
+  provider: provider,
+  domain: firebaseAuthDomain,
+  apiKey: firebaseApiKey,
+  persistance: persistance
+  //domain: auth0Domain,
+  //clientId: aut0ClientID,
+  //audience: auth0Audience,
+  //domain: keycloakDomain,
+  //realm: keycloakRealm,
+  //clientId: keycloakClientID,
+  //clientSecret: keycloakClientSecret,
+  //adminSecret: keycloakAdminSecret,
+}
+
+const authProvider = initializeProvider(config)
+
 ReactDOM.render(
   <ErrorBoundary>
     <Router>
       <LocaleContextProvider>
         <ThemeContextProvider>
-          <App />
+          <AuthContextProvider auth={authProvider}>
+            <App />
+          </AuthContextProvider>
         </ThemeContextProvider>
       </LocaleContextProvider>
     </Router>

src/routes.tsx

@@ -6,8 +6,11 @@ import NotFoundView from '../src/views/errors/NotFoundView'
 import RegisterView from '../src/views/auth/RegisterView'
 
 import {
-  ErrorBoundary,
   generatePagesRoutes,
+  DefaultLoginView,
+  ResetPassword,
+  SignupWithEmail,
+  ErrorBoundary
 } from '@iteria-app/component-templates'
 import * as generatedGraphql from './generated/graphql'
 import HomePage from './pages/home'
@@ -35,7 +38,7 @@ const newRoutes = Object.keys(filebasedRouting).map((route) => {
       <ErrorBoundary>
         <Container />
       </ErrorBoundary>
-    ),
+    )
   }
 })
 
@@ -47,24 +50,25 @@ const routes = [
   {
     path: 'app',
     element: <DashboardLayout />,
-    children: routing,
+    children: routing
   },
   {
     path: 'test',
     element: <DashboardLayout />,
-    children: newRoutes,
+    children: newRoutes
   },
   {
     path: '/',
     element: <DashboardLayout />,
     children: [
-      { path: 'login', element: <LoginView /> },
-      { path: 'register', element: <RegisterView /> },
+      { path: 'login', element: <DefaultLoginView /> },
+      { path: 'resetpassword', element: <ResetPassword /> },
+      { path: 'signup', element: <SignupWithEmail /> },
       { path: '404', element: <NotFoundView /> },
       { path: '/', element: <Navigate to="/app/home" /> },
-      { path: '*', element: <NotFoundView /> },
-    ],
-  },
+      { path: '*', element: <NotFoundView /> }
+    ]
+  }
 ]
 
 export default routes