@ttoss/react-auth 1.7.23 → 1.7.25

package/README.md

@@ -17,7 +17,7 @@ This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908
 ### Install
 
 ```shell
-$ yarn add @ttoss/auth @ttoss/react-notifications
+$ yarn add @ttoss/auth @ttoss/react-notifications aws-amplify
 ```
 
 ## Examples of use
@@ -25,32 +25,58 @@ $ yarn add @ttoss/auth @ttoss/react-notifications
 ### Amplify config
 
 ```ts
-import Amplify from 'aws-amplify';
-
-Amplify.configure({
-  Auth: {
-    // REQUIRED only for Federated Authentication - Amazon Cognito Identity Pool ID
-    identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab',
-
-    // REQUIRED - Amazon Cognito Region
-    region: 'XX-XXXX-X',
-
-    // OPTIONAL - Amazon Cognito Federated Identity Pool Region
-    // Required only if it's different from Amazon Cognito Region
-    identityPoolRegion: 'XX-XXXX-X',
+import { Amplify, type ResourcesConfig } from 'aws-amplify';
+import {
+  CookieStorage,
+  KeyValueStorageInterface,
+  defaultStorage,
+  sessionStorage,
+} from 'aws-amplify/utils';
+import { cognitoUserPoolsTokenProvider } from 'aws-amplify/auth/cognito';
+
+const authConfig: ResourcesConfig['Auth'] = {
+  Cognito: {
+    // REQUIRED Amazon Cognito User Pool Client ID (26-char alphanumeric string)
+    userPoolClientId: 'a1b2c3d4e5f6g7h8i9j0k1l2m3',
 
     // OPTIONAL - Amazon Cognito User Pool ID
     userPoolId: 'XX-XXXX-X_abcd1234',
 
-    // OPTIONAL - Amazon Cognito Web Client ID (26-char alphanumeric string)
-    userPoolWebClientId: 'a1b2c3d4e5f6g7h8i9j0k1l2m3',
+    loginWith: {
+      // OPTIONAL - Hosted UI configuration
+      oauth: {
+        domain: 'your_cognito_domain',
+        scopes: [
+          'phone',
+          'email',
+          'profile',
+          'openid',
+          'aws.cognito.signin.user.admin',
+        ],
+        redirectSignIn: ['http://localhost:3000/'],
+        redirectSignOut: ['http://localhost:3000/'],
+        responseType: 'code', // or 'token', note that REFRESH token will only be generated when the responseType is code
+      },
+    },
+  },
+};
 
-    // OPTIONAL - Enforce user authentication prior to accessing AWS resources or not
-    mandatorySignIn: false,
+Amplify.configure({
+  Auth: authConfig,
+});
 
+// Browser Local Storage
+// In Amplify the localStorage is the default storage mechanism. It saves the tokens in the browser's localStorage.
+// This local storage will persist across browser sessions and tabs. You can explicitly set to this storage by calling:
+cognitoUserPoolsTokenProvider.setKeyValueStorage(defaultStorage);
+
+// Cookie Storage
+// CookieStorage saves the tokens in the browser's Cookies. The cookies will persist across browser sessions and tabs.
+// You can explicitly set to this storage by calling:
+cognitoUserPoolsTokenProvider.setKeyValueStorage(
+  new CookieStorage(
     // OPTIONAL - Configuration for cookie storage
-    // Note: if the secure flag is set to true, then the cookie transmission requires a secure protocol
-    cookieStorage: {
+    {
       // REQUIRED - Cookie domain (only required if cookieStorage is provided)
       domain: '.yourdomain.com',
       // OPTIONAL - Cookie path
@@ -58,37 +84,41 @@ Amplify.configure({
       // OPTIONAL - Cookie expiration in days
       expires: 365,
       // OPTIONAL - See: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite
-      sameSite: 'strict' | 'lax',
+      sameSite: 'strict' | 'lax' | 'none',
       // OPTIONAL - Cookie secure flag
       // Either true or false, indicating if the cookie transmission requires a secure protocol (https).
       secure: true,
-    },
+    }
+  )
+);
 
-    // OPTIONAL - customized storage object
-    storage: MyStorage,
-
-    // OPTIONAL - Manually set the authentication flow type. Default is 'USER_SRP_AUTH'
-    authenticationFlowType: 'USER_PASSWORD_AUTH',
-
-    // OPTIONAL - Manually set key value pairs that can be passed to Cognito Lambda Triggers
-    clientMetadata: { myCustomKey: 'myCustomValue' },
-
-    // OPTIONAL - Hosted UI configuration
-    oauth: {
-      domain: 'your_cognito_domain',
-      scope: [
-        'phone',
-        'email',
-        'profile',
-        'openid',
-        'aws.cognito.signin.user.admin',
-      ],
-      redirectSignIn: 'http://localhost:3000/',
-      redirectSignOut: 'http://localhost:3000/',
-      responseType: 'code', // or 'token', note that REFRESH token will only be generated when the responseType is code
-    },
-  },
-});
+// Browser Session Storage
+// sessionStorage saves the tokens in the browser's sessionStorage and these tokens will clear when a tab is closed.
+// The benefit to this storage mechanism is that the session only lasts as long as the browser is open and you
+// can sign out users when they close the tab. You can update to this storage by calling:
+cognitoUserPoolsTokenProvider.setKeyValueStorage(sessionStorage);
+
+// Custom Storage
+// You can implement your own custom storage mechanism by creating a class that implements the storage interface.
+// Here is an example that uses memory storage:
+
+class MyCustomStorage implements KeyValueStorageInterface {
+  storageObject: Record<string, string> = {};
+  async setItem(key: string, value: string): Promise<void> {
+    this.storageObject[key] = value;
+  }
+  async getItem(key: string): Promise<string | null> {
+    return this.storageObject[key];
+  }
+  async removeItem(key: string): Promise<void> {
+    delete this.storageObject[key];
+  }
+  async clear(): Promise<void> {
+    this.storageObject = {};
+  }
+}
+
+cognitoUserPoolsTokenProvider.setKeyValueStorage(new MyCustomStorage());
 ```
 
 ### PrivateRoute component

package/dist/esm/index.js

@@ -2,10 +2,11 @@
 
 // src/AuthProvider.tsx
 import * as React from "react";
-import { Auth, Hub } from "aws-amplify";
+import { Hub } from "aws-amplify/utils";
+import { signOut as awsSignOut, fetchAuthSession, fetchUserAttributes, getCurrentUser } from "aws-amplify/auth";
 import { jsx } from "react/jsx-runtime";
 var signOut = () => {
-  return Auth.signOut();
+  return awsSignOut();
 };
 var AuthContext = /*#__PURE__*/React.createContext({
   signOut,
@@ -27,24 +28,29 @@ var AuthProvider = ({
   });
   React.useEffect(() => {
     const updateUser = () => {
-      Auth.currentAuthenticatedUser().then(({
-        attributes,
-        signInUserSession
+      getCurrentUser().then(async ({
+        userId,
+        username
       }) => {
+        const session = await fetchAuthSession();
+        const idToken = session.tokens?.idToken?.toString();
+        const accessToken = session.tokens?.accessToken.toString();
+        const user2 = await fetchUserAttributes();
         setAuthState({
           user: {
-            id: attributes.sub,
-            email: attributes.email,
-            emailVerified: attributes["email_verified"]
+            id: userId,
+            email: username,
+            emailVerified: user2.email_verified ?? ""
           },
           tokens: {
-            idToken: signInUserSession.idToken.jwtToken,
-            accessToken: signInUserSession.accessToken.jwtToken,
-            refreshToken: signInUserSession.refreshToken.token
+            idToken: idToken ?? "",
+            accessToken: accessToken ?? "",
+            refreshToken: ""
           },
           isAuthenticated: true
         });
-      }).catch(() => {
+      }).catch(e => {
+        console.error(e);
         setAuthState({
           user: null,
           tokens: null,
@@ -77,7 +83,6 @@ var useAuth = () => {
 
 // src/Auth.tsx
 import * as React6 from "react";
-import { Auth as AmplifyAuth } from "aws-amplify";
 
 // src/AuthCard.tsx
 import * as React2 from "react";
@@ -1124,6 +1129,7 @@ var AuthSignUp = ({
 
 // src/Auth.tsx
 import { assign, createMachine } from "xstate";
+import { confirmResetPassword, confirmSignUp, resendSignUpCode, resetPassword, signIn, signUp } from "aws-amplify/auth";
 import { useMachine } from "@xstate/react";
 import { useNotifications as useNotifications4 } from "@ttoss/react-notifications";
 import { jsx as jsx9 } from "react/jsx-runtime";
@@ -1217,11 +1223,16 @@ var AuthLogic = () => {
   }) => {
     try {
       setLoading(true);
-      await AmplifyAuth.signIn(email, password);
+      await signIn({
+        username: email,
+        password
+      });
     } catch (error) {
       switch (error.code) {
         case "UserNotConfirmedException":
-          await AmplifyAuth.resendSignUp(email);
+          await resendSignUpCode({
+            username: email
+          });
           send({
             type: "SIGN_UP_RESEND_CONFIRMATION",
             email
@@ -1243,11 +1254,13 @@ var AuthLogic = () => {
   }) => {
     try {
       setLoading(true);
-      await AmplifyAuth.signUp({
+      await signUp({
         username: email,
         password,
-        attributes: {
-          email
+        options: {
+          userAttributes: {
+            email
+          }
         }
       });
       send({
@@ -1269,7 +1282,10 @@ var AuthLogic = () => {
   }) => {
     try {
       setLoading(true);
-      await AmplifyAuth.confirmSignUp(email, code);
+      await confirmSignUp({
+        confirmationCode: code,
+        username: email
+      });
       send({
         type: "SIGN_UP_CONFIRMED",
         email
@@ -1293,7 +1309,9 @@ var AuthLogic = () => {
   }) => {
     try {
       setLoading(true);
-      await AmplifyAuth.forgotPassword(email);
+      await resetPassword({
+        username: email
+      });
       send({
         type: "FORGOT_PASSWORD_RESET_PASSWORD",
         email
@@ -1314,7 +1332,11 @@ var AuthLogic = () => {
   }) => {
     try {
       setLoading(true);
-      await AmplifyAuth.forgotPasswordSubmit(email, code, newPassword);
+      await confirmResetPassword({
+        confirmationCode: code,
+        username: email,
+        newPassword
+      });
       send({
         type: "FORGOT_PASSWORD_CONFIRMED",
         email
@@ -1372,7 +1394,7 @@ var AuthLogic = () => {
     }
   });
 };
-var Auth2 = ({
+var Auth = ({
   logo,
   fullScreen = true
 }) => {
@@ -1389,4 +1411,4 @@ var Auth2 = ({
   }
   return withLogoNode;
 };
-export { Auth2 as Auth, AuthProvider, useAuth };
+export { Auth, AuthProvider, useAuth };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-auth",
-  "version": "1.7.23",
+  "version": "1.7.25",
   "description": "ttoss authentication module for React apps.",
   "author": "ttoss",
   "contributors": [
@@ -30,23 +30,23 @@
     "@ttoss/forms": "^0.21.9"
   },
   "peerDependencies": {
-    "aws-amplify": "^5.0.0",
+    "aws-amplify": "^6.0.0",
     "react": ">=16.8.0",
-    "@ttoss/react-notifications": "^1.24.23",
+    "@ttoss/react-notifications": "^1.24.24",
     "@ttoss/react-i18n": "^1.25.8",
     "@ttoss/ui": "^4.0.7"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
     "@types/react": "^18.2.39",
-    "aws-amplify": "^5.3.11",
+    "aws-amplify": "^6.0.12",
     "jest": "^29.7.0",
     "tsup": "^8.0.1",
     "@ttoss/cloud-auth": "^0.12.0",
     "@ttoss/config": "^1.31.4",
     "@ttoss/i18n-cli": "^0.7.5",
     "@ttoss/react-i18n": "^1.25.8",
-    "@ttoss/react-notifications": "^1.24.23",
+    "@ttoss/react-notifications": "^1.24.24",
     "@ttoss/test-utils": "^2.0.4",
     "@ttoss/ui": "^4.0.7"
   },

package/src/Auth.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Auth as AmplifyAuth } from 'aws-amplify';
 import { AuthConfirmSignUp } from './AuthConfirmSignUp';
 import { AuthForgotPassword } from './AuthForgotPassword';
 import { AuthForgotPasswordResetPassword } from './AuthForgotPasswordResetPassword';
@@ -8,6 +7,14 @@ import { AuthSignIn } from './AuthSignIn';
 import { AuthSignUp } from './AuthSignUp';
 import { LogoContextProps, LogoProvider } from './AuthCard';
 import { assign, createMachine } from 'xstate';
+import {
+  confirmResetPassword,
+  confirmSignUp,
+  resendSignUpCode,
+  resetPassword,
+  signIn,
+  signUp,
+} from 'aws-amplify/auth';
 import { useAuth } from './AuthProvider';
 import { useMachine } from '@xstate/react';
 import { useNotifications } from '@ttoss/react-notifications';
@@ -136,13 +143,13 @@ const AuthLogic = () => {
     async ({ email, password }) => {
       try {
         setLoading(true);
-        await AmplifyAuth.signIn(email, password);
+        await signIn({ username: email, password });
         // toast('Signed In');
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
       } catch (error: any) {
         switch (error.code) {
           case 'UserNotConfirmedException':
-            await AmplifyAuth.resendSignUp(email);
+            await resendSignUpCode({ username: email });
             send({ type: 'SIGN_UP_RESEND_CONFIRMATION', email });
             break;
           default:
@@ -160,10 +167,14 @@ const AuthLogic = () => {
     async ({ email, password }) => {
       try {
         setLoading(true);
-        await AmplifyAuth.signUp({
+        await signUp({
           username: email,
           password,
-          attributes: { email },
+          options: {
+            userAttributes: {
+              email,
+            },
+          },
         });
         // toast('Signed Up');
         send({ type: 'SIGN_UP_CONFIRM', email });
@@ -182,7 +193,7 @@ const AuthLogic = () => {
     async ({ email, code }) => {
       try {
         setLoading(true);
-        await AmplifyAuth.confirmSignUp(email, code);
+        await confirmSignUp({ confirmationCode: code, username: email });
         // toast('Confirmed Signed In');
         send({ type: 'SIGN_UP_CONFIRMED', email });
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -204,7 +215,7 @@ const AuthLogic = () => {
     async ({ email }) => {
       try {
         setLoading(true);
-        await AmplifyAuth.forgotPassword(email);
+        await resetPassword({ username: email });
         // toast('Forgot Password');
         send({ type: 'FORGOT_PASSWORD_RESET_PASSWORD', email });
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -223,7 +234,11 @@ const AuthLogic = () => {
       async ({ email, code, newPassword }) => {
         try {
           setLoading(true);
-          await AmplifyAuth.forgotPasswordSubmit(email, code, newPassword);
+          await confirmResetPassword({
+            confirmationCode: code,
+            username: email,
+            newPassword,
+          });
           // toast('Forgot Password Reset Password');
           send({ type: 'FORGOT_PASSWORD_CONFIRMED', email });
           // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/src/AuthProvider.tsx

@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { Auth, Hub } from 'aws-amplify';
+import { Hub } from 'aws-amplify/utils';
+import {
+  signOut as awsSignOut,
+  fetchAuthSession,
+  fetchUserAttributes,
+  getCurrentUser,
+} from 'aws-amplify/auth';
 
 type User = {
   id: string;
@@ -14,10 +20,11 @@ type Tokens = {
 } | null;
 
 const signOut = () => {
-  return Auth.signOut();
+  return awsSignOut();
 };
 
 const AuthContext = React.createContext<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   signOut: () => Promise<any>;
   isAuthenticated: boolean;
   user: User;
@@ -42,23 +49,31 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
 
   React.useEffect(() => {
     const updateUser = () => {
-      Auth.currentAuthenticatedUser()
-        .then(({ attributes, signInUserSession }) => {
+      getCurrentUser()
+        .then(async ({ userId, username }) => {
+          const session = await fetchAuthSession();
+          const idToken = session.tokens?.idToken?.toString();
+          const accessToken = session.tokens?.accessToken.toString();
+
+          const user = await fetchUserAttributes();
+
           setAuthState({
             user: {
-              id: attributes.sub,
-              email: attributes.email,
-              emailVerified: attributes['email_verified'],
+              id: userId,
+              email: username,
+              emailVerified: user.email_verified ?? '',
             },
             tokens: {
-              idToken: signInUserSession.idToken.jwtToken,
-              accessToken: signInUserSession.accessToken.jwtToken,
-              refreshToken: signInUserSession.refreshToken.token,
+              idToken: idToken ?? '',
+              accessToken: accessToken ?? '',
+              refreshToken: '',
             },
             isAuthenticated: true,
           });
         })
-        .catch(() => {
+        .catch((e) => {
+          // eslint-disable-next-line no-console
+          console.error(e);
           setAuthState({
             user: null,
             tokens: null,