fix(nile-js): set token on Nile create

lib/nile/spec/api.yaml

@@ -4,7 +4,7 @@ info:
   description: Making SaaS chill.
   contact:
     email: [email protected]
-  version: 0.1.0-e78fcc4
+  version: 0.1.0-6591b7d
 servers:
   - url: localhost:8080
 tags:
@@ -2043,6 +2043,9 @@ components:
             - oidc_token_unidentifiable
             - oidc_redirect_urls_undefined
             - oidc_verify_attempt_not_found
+            - oidc_verify_attempt_invalid
+            - oidc_verify_attempt_repeated
+            - oidc_verify_attempt_expired
         message:
           type: string
         status_code:

lib/nile/src/Nile.ts

@@ -10,6 +10,7 @@ import {
   UsersApi,
   WorkspacesApi as WorkspaceApi,
   MetricsApi,
+  AuthApi,
 } from './client/src';
 import {
   Configuration,
@@ -41,6 +42,7 @@ export class NileApi {
   events: EventsApi;
   access: AccessApi;
   metrics: MetricsApi;
+  auth: AuthApi;
   constructor(configuration?: Configuration) {
     this.config = configuration;
 
@@ -69,6 +71,19 @@ export class NileApi {
     this.events = new EventsApi(this.entities);
     this.access = new AccessApi(configuration);
     this.metrics = new MetricsApi(configuration);
+    this.auth = new AuthApi(configuration);
+
+    // this needs to be last because setToken sets all classes
+    if (this.config?.tokenStorage === StorageOptions.LocalStorage) {
+      if (typeof window !== 'undefined') {
+        if (this.config?.tokenStorage === StorageOptions.LocalStorage) {
+          const token = localStorage.getItem('nileToken');
+          if (token) {
+            this.authToken = token;
+          }
+        }
+      }
+    }
   }
 
   /**
@@ -98,6 +113,7 @@ export class NileApi {
       this.workspaces.workspace = workspace;
       this.access.workspace = workspace;
       this.metrics.workspace = workspace;
+      this.auth.workspace = workspace;
     }
   }
 
@@ -126,10 +142,13 @@ export class NileApi {
     if (this.metrics.workspace) {
       return this.metrics.workspace;
     }
+    if (this.auth.workspace) {
+      return this.auth.workspace;
+    }
   }
 
   /**
-   * When a token is set, it is shared across all classes
+   * When a token is set, it is shared across all classes.
    */
   set authToken(token: void | string) {
     if (this.config?.tokenStorage === StorageOptions.LocalStorage) {
@@ -149,6 +168,7 @@ export class NileApi {
       this.organizations.authToken = token;
       this.access.authToken = token;
       this.metrics.authToken = token;
+      this.auth.authToken = token;
     }
   }
 
@@ -186,6 +206,9 @@ export class NileApi {
     if (this.metrics.authToken) {
       return this.metrics.authToken;
     }
+    if (this.auth.authToken) {
+      return this.auth.authToken;
+    }
   }
   /**
    * Creates a NileApi instance and connects using the provided credentials.

lib/nile/src/test/index.test.ts

@@ -21,6 +21,7 @@ describe('index', () => {
         'events',
         'access',
         'metrics',
+        'auth',
       ]);
       keys.shift();
       keys.forEach((k) => {
@@ -129,6 +130,13 @@ describe('index', () => {
             'produceBatchOfMetrics',
           ]);
         }
+        if (k === 'auth') {
+          expect(props).toEqual([
+            'constructor',
+            'managedOidcCallback',
+            'managedOidcCallback1',
+          ]);
+        }
       });
     });
 

packages/examples/pages/_app.tsx

@@ -2,10 +2,15 @@ import React from 'react';
 import '../styles/globals.css';
 import type { AppProps } from 'next/app';
 import { NileProvider } from '@theniledev/react';
+import { StorageOptions } from '@theniledev/js';
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <NileProvider basePath="http://localhost:8080" workspace="1">
+    <NileProvider
+      basePath="http://localhost:8080"
+      workspace="toastr2"
+      tokenStorage={StorageOptions.LocalStorage}
+    >
       <Component {...pageProps} />
     </NileProvider>
   );

packages/examples/pages/users.tsx

@@ -22,7 +22,8 @@ const useOrgQuery = () => {
     const org = orgs?.filter(
       (org: Organization) => org.name === currentUserEmail
     );
-    const [{ id }] = org ?? [{}];
+    const [{ id }] =
+      orgs && orgs?.length > 0 ? (org as Organization[]) : [{ id: '' }];
     return id;
   }, [currentUserEmail, orgs]);
   return [userLoading || orgLoading, orgId];

packages/react/src/lib/SimpleForm/CheckGroup/index.tsx

@@ -12,13 +12,14 @@ type Props = {
   attribute: Attribute;
   display: DisplayProps;
   options: Options;
+  helperText: string;
 };
 export default function CheckGroup(props: Props) {
-  const { options, attribute, display } = props;
+  const { options, attribute, display, helperText } = props;
   const { watch, control } = useFormContext();
   const currentVals = watch(attribute.name);
   const checkProps: { color?: 'danger'; id?: string } = {};
-  if (display.helperText) {
+  if (helperText) {
     checkProps.color = 'danger';
   }
   return (
@@ -36,7 +37,7 @@ export default function CheckGroup(props: Props) {
               sx={{
                 borderRadius: 'var(--joy-radius-sm)',
                 p: 0.5,
-                border: display.helperText
+                border: helperText
                   ? '1px solid var(--joy-palette-danger-outlinedBorder)'
                   : 'none',
               }}
@@ -95,7 +96,7 @@ export default function CheckGroup(props: Props) {
               sx={{ color: 'var(--joy-palette-danger-500)' }}
               level="body2"
             >
-              {display.helperText}
+              {helperText}
             </Typography>
           </Stack>
         );

packages/react/src/lib/SimpleForm/index.tsx

@@ -84,9 +84,10 @@ export default function ConfigForm(props: {
             error: Boolean(errors[attr.name]),
           };
           const options = attr.options ?? [];
+          let helperText = '';
 
           if (attr.required) {
-            display.helperText = errors[attr.name] && 'This field is required';
+            helperText = errors[attr.name] ? 'This field is required' : '';
             fieldConfig.required = true;
           }
 
@@ -98,11 +99,13 @@ export default function ConfigForm(props: {
                   attribute={attr}
                   display={display}
                   options={options}
+                  helperText={helperText}
                 />
               );
             case AttributeType.Select:
               return (
                 <FormControl
+                  key={display.key}
                   sx={{
                     '--FormHelperText-color': 'var(--joy-palette-danger-500)',
                   }}
@@ -139,7 +142,7 @@ export default function ConfigForm(props: {
                             })}
                           </Select>
                           <FormHelperText id={`${attr.name}-helper-text`}>
-                            {display.helperText}
+                            {helperText}
                           </FormHelperText>
                         </Stack>
                       );
@@ -150,6 +153,7 @@ export default function ConfigForm(props: {
             case AttributeType.Password:
               return (
                 <FormControl
+                  key={display.key}
                   sx={{
                     '--FormHelperText-color': 'var(--joy-palette-danger-500)',
                   }}
@@ -161,13 +165,14 @@ export default function ConfigForm(props: {
                     type={AttributeType.Password}
                   />
                   <FormHelperText id={`${attr.name}-helper-text`}>
-                    {display.helperText}
+                    {helperText}
                   </FormHelperText>
                 </FormControl>
               );
             case AttributeType.Number:
               return (
                 <FormControl
+                  key={display.key}
                   sx={{
                     '--FormHelperText-color': 'var(--joy-palette-danger-500)',
                   }}
@@ -179,7 +184,7 @@ export default function ConfigForm(props: {
                     type={AttributeType.Number}
                   />
                   <FormHelperText id={`${attr.name}-helper-text`}>
-                    {display.helperText}
+                    {helperText}
                   </FormHelperText>
                 </FormControl>
               );
@@ -188,14 +193,15 @@ export default function ConfigForm(props: {
             default:
               return (
                 <FormControl
+                  key={display.key}
                   sx={{
                     '--FormHelperText-color': 'var(--joy-palette-danger-500)',
                   }}
                 >
                   <FormLabel>{attr.label ?? attr.name}</FormLabel>
                   <Input {...display} {...register(attr.name, fieldConfig)} />
                   <FormHelperText id={`${attr.name}-helper-text`}>
-                    {display.helperText}
+                    {helperText}
                   </FormHelperText>
                 </FormControl>
               );

packages/react/src/lib/SimpleForm/types.ts

@@ -24,7 +24,6 @@ export type DisplayProps = {
   key: string;
   label: string;
   placeholder: string;
-  helperText?: string;
   error?: boolean;
   color?: 'danger';
 };

packages/react/src/lib/hooks/useVerifyToken/index.ts

@@ -34,10 +34,11 @@ export const useVerifyToken = (): [boolean, null | string] => {
       setError(null);
       if (token) {
         try {
-          await fetch(
-            `${nile.config?.basePath}/auth/oidc/verify?state=${token}`
-          );
-          setSuccess(true);
+          const res = await nile.auth.managedOidcCallback1();
+          if (res) {
+            nile.authToken = res.token;
+            setSuccess(true);
+          }
         } catch (e) {
           if (e instanceof Error) {
             setError(e.message);
@@ -46,7 +47,7 @@ export const useVerifyToken = (): [boolean, null | string] => {
       }
     }
     doRequest();
-  }, [nile.config?.basePath, token, url]);
+  }, [nile, token, url]);
 
   return [success, error];
 };