Merge pull request #68 from brionmario/next

feat: `SignIn` component for `@asgardeo/react`

Author: brionmario

.changeset/smart-spiders-film.md

@@ -0,0 +1,7 @@
+---
+'@asgardeo/browser': minor
+'@asgardeo/javascript': minor
+'@asgardeo/react': minor
+---
+
+Support `SignIn` component in `@asgardeo/react`.

README.md

@@ -34,6 +34,7 @@ This repository contains the source code of JavaScript SDKs that can be used to
 | [![@asgardeo/browser](https://img.shields.io/npm/v/@asgardeo/browser?color=%234B32C3&label=%40asgardeo%2Fbrowser&logo=firefox)](./packages/browser/) | Browser-based JavaScript SDK |
 | [![@asgardeo/nextjs](https://img.shields.io/npm/v/@asgardeo/nextjs?color=%23000000&label=%40asgardeo%2Fnext&logo=next.js)](./packages/next/) | Next.js SDK for building applications with Asgardeo |
 | [![@asgardeo/node](https://img.shields.io/npm/v/@asgardeo/node?color=%23339933&label=%40asgardeo%2Fnode&logo=node.js)](./packages/node/) | Node.js SDK for server-side integration |
+| [![@asgardeo/express](https://img.shields.io/npm/v/@asgardeo/express?color=%23339933&label=%40asgardeo%2Fexpress&logo=express)](./packages/express/) | Express.js SDK for server-side integration |
 | [![@asgardeo/nuxt](https://img.shields.io/npm/v/@asgardeo/nuxt?color=%2300DC82&label=%40asgardeo%2Fnuxt&logo=nuxt)](./packages/nuxt/) | Nuxt.js SDK for building applications with Asgardeo |
 | [![@asgardeo/react](https://img.shields.io/npm/v/@asgardeo/react?color=%2361DAFB&label=%40asgardeo%2Freact&logo=react)](./packages/react/) | React SDK for building applications with Asgardeo |
 | [![@asgardeo/vue](https://img.shields.io/npm/v/@asgardeo/vue?color=%234FC08D&label=%40asgardeo%2Fvue&logo=vue.js)](./packages/vue/) | Vue.js SDK for building applications with Asgardeo |

docs/src/react/components/asgardeo-provider.md

@@ -38,9 +38,9 @@ import { AsgardeoProvider } from "@asgardeo/react";
 
   - `baseURL`: The base URL of asgardeo.
 
-  - `signInRedirectURL`: The URL where users should be redirected after they sign in. This should be a page in your application.
+  - `afterSignInUrl`: The URL where users should be redirected after they sign in. This should be a page in your application.
 
-  - `clientID`: The ID of your application. You get this when you register your application with Asgardeo.
+  - `clientId`: The ID of your application. You get this when you register your application with Asgardeo.
 
   - `scope`: The scope of the access request. This is a list of scopes separated by spaces. Scopes allow your application to request access only to the resources it needs, and also allow users to control how much access they grant to your application.
 

docs/src/react/hooks/use-authentication.md

@@ -31,7 +31,7 @@ import { useAuthentication } from "@asgardeo/react";
 Then, you can use it in your component:
 
 ```ts
-const { user, isAuthenticated, accessToken, signOut } = useAuthentication();
+const { user, isSignedIn, accessToken, signOut } = useAuthentication();
 ```
 
 ## Return Value
@@ -40,7 +40,7 @@ The `useAuthentication` hook returns an object with the following properties:
 
 - `user`: The current user. This is an object that contains information about the user.
 
-- `isAuthenticated`: A boolean that indicates whether the user is authenticated.
+- `isSignedIn`: A boolean that indicates whether the user is authenticated.
 
 - `accessToken`: The access token for the authenticated user.
 
@@ -49,9 +49,9 @@ The `useAuthentication` hook returns an object with the following properties:
 Here's an example of how to use these values:
 
 ```ts
-const { user, isAuthenticated, signOut } = useAuthentication();
+const { user, isSignedIn, signOut } = useAuthentication();
 
-if (isAuthenticated) {
+if (isSignedIn) {
   console.log(`User ${user.username} is authenticated.`);
 } else {
   console.log("User is not authenticated.");

docs/src/react/introduction.md

@@ -71,9 +71,9 @@ Then, wrap your application with the `AsgardeoProvider` and pass the basic confi
 <AsgardeoProvider
     config={{
       baseUrl: "https://api.asgardeo.io/t/org_name",
-      clientID: "gqtroUbA1Qsulqr*****",
+      clientId: "gqtroUbA1Qsulqr*****",
       scope: ["openid", "internal_login", "profile"],
-      signInRedirectURL: "https://domain_name:8080",
+      afterSignInUrl: "https://domain_name:8080",
     }}>
     <App />
 </AsgardeoProvider>

package.json

@@ -5,13 +5,13 @@
   "description": "Workspace to hold the Asgardeo JavaScript SDKs.",
   "author": "WSO2",
   "license": "Apache-2.0",
-  "homepage": "https://github.com/asgardeo/javascript#readme",
+  "homepage": "https://github.com/asgardeo/web-ui-sdks#readme",
   "bugs": {
-    "url": "https://github.com/asgardeo/javascript/issues"
+    "url": "https://github.com/asgardeo/web-ui-sdks/issues"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/asgardeo/javascript"
+    "url": "https://github.com/asgardeo/web-ui-sdks"
   },
   "keywords": [
     "asgardeo",
@@ -24,6 +24,7 @@
     "lint": "nx run-many --target=lint --all --parallel",
     "publish:packages": "changeset publish",
     "test": "nx run-many --target=test --all --parallel",
+    "typecheck": "nx run-many --target=typecheck --all --parallel",
     "version:packages": "changeset version && pnpm install --lockfile-only"
   },
   "devDependencies": {
@@ -39,4 +40,4 @@
   "publishConfig": {
     "access": "restricted"
   }
-}
+}

packages/__legacy__/core/src/api/authenticate.ts

@@ -44,7 +44,7 @@ const authenticate = async (props: AuthenticateProps): Promise<AuthApiResponse>
     };
 
     /* Getting baseURL from authClient's data layer */
-    const {baseUrl} = await AuthClient.getInstance().getDataLayer().getConfigData();
+    const {baseUrl} = await AuthClient.getInstance().getStorageManager().getConfigData();
 
     authnRequest = new Request(`${baseUrl}/oauth2/authn`, requestOptions);
   } catch (error) {

packages/__legacy__/core/src/api/authorize.ts

@@ -32,7 +32,9 @@ const authorize = async (): Promise<AuthApiResponse> => {
 
   try {
     const authInstace: UIAuthClient = AuthClient.getInstance();
-    const params: Map<string, string> = await authInstace.getAuthorizationURLParams();
+    // FIXME: We should be able to get the URL itself.
+    // const params: Map<string, string> = await authInstace.getAuthorizationURLParams();
+    const params: Map<string, string> = new Map();
 
     const formBody: URLSearchParams = new URLSearchParams();
 
@@ -41,7 +43,7 @@ const authorize = async (): Promise<AuthApiResponse> => {
     });
 
     /* Save the state temporarily in the data layer, this needs to be passed when token is requested */
-    await authInstace.getDataLayer().setTemporaryDataParameter('state', params.get('state'));
+    await authInstace.getStorageManager().setTemporaryDataParameter('state', params.get('state'));
 
     const headers: Headers = new Headers();
     headers.append('Accept', 'application/json');
@@ -53,7 +55,7 @@ const authorize = async (): Promise<AuthApiResponse> => {
       method: 'POST',
     };
 
-    authzURL = (await authInstace.getOIDCServiceEndpoints()).authorizationEndpoint;
+    authzURL = (await authInstace.getOpenIDProviderEndpoints()).authorizationEndpoint;
   } catch (error) {
     throw new AsgardeoUIException('JS_UI_CORE-AUTHZ-A-NF', 'Authorization request building failed', error.stack);
   }

packages/__legacy__/core/src/api/get-branding-preference-text.ts

@@ -50,7 +50,7 @@ const getBrandingPreferenceText = async (
   params.append('screen', screen);
   params.append('type', type);
 
-  const {baseUrl} = await AuthClient.getInstance().getDataLayer().getConfigData();
+  const {baseUrl} = await AuthClient.getInstance().getStorageManager().getConfigData();
   const textUrl: string = `${baseUrl}/api/server/v1/branding-preference/text/resolve`;
   const urlWithParams: string = `${textUrl}?${params.toString()}`;
   let response: Response;

packages/__legacy__/core/src/api/get-branding-preference.ts

@@ -31,7 +31,7 @@ const getBrandingPreference = async (): Promise<BrandingPreferenceAPIResponse> =
     baseUrl,
     type = BrandingPreferenceTypes.Org,
     name = 'WSO2',
-  } = await AuthClient.getInstance().getDataLayer().getConfigData();
+  } = await AuthClient.getInstance().getStorageManager().getConfigData();
   const brandingUrl: string = `${baseUrl}/api/server/v1/branding-preference?type=${type}&name=${name}`;
   let response: Response;