aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.44k stars 2.13k forks source link

Since v6 I am no longer receiving _userauth.sign_in, _userauth.sign_up, _userauth.auth_fail events. Only _session.start and _session.stop #13382

Open soplan opened 6 months ago

soplan commented 6 months ago

Before opening, please confirm:

JavaScript Framework

React

Amplify APIs

Analytics

Amplify Version

v6

Amplify Categories

analytics

Backend

Other

Environment information

``` # Put output below this line System: OS: macOS 14.4.1 CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz Memory: 938.46 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node Yarn: 1.22.18 - ~/.yarn/bin/yarn npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm Browsers: Brave Browser: 123.1.64.116 Chrome: 124.0.6367.158 Safari: 17.4.1 npmPackages: @emotion/react: ^11.11.4 => 11.11.4 @emotion/styled: ^11.11.0 => 11.11.5 @formatjs/cli: ^6.0.4 => 6.2.10 @formatjs/ts-transformer: ^3.12.0 => 3.13.12 @mui/icons-material: ^5.15.12 => 5.15.17 @mui/material: ^5.15.12 => 5.15.17 @mui/x-date-pickers: ^7.0.0 => 7.3.2 @sentry/react: ^7.114.0 => 7.114.0 @types/lodash: ^4.14.191 => 4.17.1 @types/react: ^18.2.56 => 18.3.1 @types/react-dom: ^18.2.19 => 18.3.0 @typescript-eslint/eslint-plugin: ^7.0.2 => 7.8.0 @typescript-eslint/parser: ^7.0.2 => 7.8.0 @vitejs/plugin-react: ^4.2.1 => 4.2.1 @vvo/tzdb: ^6.126.0 => 6.138.0 aws-amplify: ^6.0.18 => 6.3.0 aws-amplify/adapter-core: undefined () aws-amplify/analytics: undefined () aws-amplify/analytics/kinesis: undefined () aws-amplify/analytics/kinesis-firehose: undefined () aws-amplify/analytics/personalize: undefined () aws-amplify/analytics/pinpoint: undefined () aws-amplify/api: undefined () aws-amplify/api/server: undefined () aws-amplify/auth: undefined () aws-amplify/auth/cognito: undefined () aws-amplify/auth/cognito/server: undefined () aws-amplify/auth/enable-oauth-listener: undefined () aws-amplify/auth/server: undefined () aws-amplify/data: undefined () aws-amplify/data/server: undefined () aws-amplify/datastore: undefined () aws-amplify/in-app-messaging: undefined () aws-amplify/in-app-messaging/pinpoint: undefined () aws-amplify/push-notifications: undefined () aws-amplify/push-notifications/pinpoint: undefined () aws-amplify/storage: undefined () aws-amplify/storage/s3: undefined () aws-amplify/storage/s3/server: undefined () aws-amplify/storage/server: undefined () aws-amplify/utils: undefined () axios: ^1.6.7 => 1.6.8 dayjs: ^1.11.10 => 1.11.11 eslint: ^8.56.0 => 8.57.0 eslint-plugin-formatjs: ^4.9.0 => 4.13.1 eslint-plugin-react-hooks: ^4.6.0 => 4.6.2 eslint-plugin-react-refresh: ^0.4.5 => 0.4.7 iso-639-1: ^3.1.2 => 3.1.2 lodash: ^4.17.21 => 4.17.21 notistack: ^3.0.1 => 3.0.1 patch-package: ^8.0.0 => 8.0.0 react: ^18.2.0 => 18.3.1 react-dom: ^18.2.0 => 18.3.1 react-hook-form: ^7.51.0 => 7.51.4 react-infinite-scroll-component: ^6.1.0 => 6.1.0 react-intl: ^6.6.2 => 6.6.6 react-router-dom: ^6.22.2 => 6.23.0 react-swipe-to-delete-ios: ^2.1.0 => 2.1.0 react-use: ^17.5.0 => 17.5.0 typescript: ^5.2.2 => 5.4.5 vite: ^5.1.4 => 5.2.11 vite-plugin-svgr: ^4.2.0 => 4.2.0 npmGlobalPackages: corepack: 0.23.0 npm: 10.2.4 ```

Describe the bug

In v5 I receive all session events like, _userauth.sign_in, _userauth.sign_up, _userauth.auth_fail

But since v6 I only continue to receive _session.start and _session.stop

I need sign_in, sign_up events to send e-mails using PinPoint journeys for newly signed up users.

Expected behavior

Show all session events as in v5

Reproduction steps

Migrate from v5 to v6. Analytics is working but I am missing some session events.

Code Snippet

// Put your code below this line.

// import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";
import { Amplify } from "aws-amplify";
import { configureAutoTrack } from 'aws-amplify/analytics';
import "./services/apiService";
import * as Sentry from "@sentry/react";

// const isDevelopment = import.meta.env.VITE_ENV === 'dev';

Sentry.init({
  dsn: import.meta.env.VITE_SENTRY_DSN,
  integrations: [
    Sentry.replayIntegration({
      maskAllText: false,
      blockAllMedia: false,
    }),
  ],
  replaysSessionSampleRate: 0.0,
  replaysOnErrorSampleRate: 1.0,
  tracesSampleRate: 0.0
});

Amplify.configure({
  Auth: {
    Cognito: {
      userPoolId: import.meta.env.VITE_COGNITO_USER_POOL_ID,
      userPoolClientId: import.meta.env.VITE_COGNITO_CLIENT_ID,
      identityPoolId: import.meta.env.VITE_COGNITO_IDENTITY_POOL_ID,
      allowGuestAccess: true,
      loginWith: {
        oauth: {
          domain: import.meta.env.VITE_COGNITO_DOMAIN,
          scopes: ["email", "openid", "profile"],
          redirectSignIn: [import.meta.env.VITE_COGNITO_OAUTH_REDIRECT],
          redirectSignOut: [import.meta.env.VITE_COGNITO_OAUTH_REDIRECT],
          responseType: "code",
        },
      },
    },
  },
  Analytics: {
    Pinpoint: {
      appId: import.meta.env.VITE_PINPOINT_ANALYTICS,
      region: import.meta.env.VITE_AWS_REGION,
    }
  }
});

configureAutoTrack({
  enable: true,
  type: 'session'
});

configureAutoTrack({
  enable: true,
  type: 'event'
});

configureAutoTrack({
  enable: true,
  type: 'pageView',
  options: {
    appType: 'singlePage'
  }
});

const container = document.getElementById("root");
if (container) {
  const root = ReactDOM.createRoot(container);
  root.render(<App />);
}

Log output

``` // Put your logs below this line ```

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

_session.start and stop work fine.

image

But sign_in won't appear..

image

And in Pinpoint console it stays 0

image

israx commented 6 months ago

Hello @soplan . Sorry for any inconvenience while upgrading to v6. As a work around could you emit the missing events while authenticating using the Pinpoint record API ?

soplan commented 6 months ago

Hello @soplan . Sorry for any inconvenience while upgrading to v6. As a work around could you emit the missing events while authenticating using the Pinpoint record API ?

Well if I could I would. But the thing is that adding a record event to a button I can’t distinguish between sign in or sign up.

Using social login so people use the same button for sign in as sign up.

israx commented 6 months ago

if you are using social login you can listen to the signInWithRedirect hub event and record the sign-in event. When it comes to sign-up with social login there is not a way for the library to know if the user has created an account on their IdP as the registration process is completed outside of the App. You can record the sign-up event after successfully creating an user with the signUp API

cwomack commented 6 months ago

@soplan, were you basing your events that were recorded in the Pinpoint console for _userauth.sign_in, _userauth.sign_up, and _userauth.auth_fail off of the v5 Hub events that are emitted from the Auth channel? I don't see where you're importing Hub in this v6 version of your app either.

soplan commented 6 months ago

@soplan, were you basing your events that were recorded in the Pinpoint console for _userauth.sign_in, _userauth.sign_up, and _userauth.auth_fail off of the v5 Hub events that are emitted from the Auth channel? I don't see where you're importing Hub in this v6 version of your app either.

We migrated back to v5, exact same setup as v6 but this time the sign in, sign up and auth_fail events appear without having to import hub.

I really like Amplify and using AWS Pinpoint but v6 is making it unusable for us.

image

Amplify.utils.ts

import { Analytics } from "aws-amplify";
import { UserNotifications, UserProfile } from "../interfaces";

export const initializeTracking = async () => {
  Analytics.autoTrack("event", {
    enable: true,
  });
  Analytics.autoTrack("session", {
    enable: true,
  });

  Analytics.autoTrack("pageView", {
    enable: true,
    eventName: "pageView",
    type: "SPA",
  });
};

export const updateEndpoint = async (updatedProfile: UserProfile) => {
  const endpointConfig = {
    userId: updatedProfile.id,
    Address: updatedProfile.email,
    ChannelType: "EMAIL",
    OptOut: "NONE",
    demographic: {
      locale: updatedProfile.locale,
      timezone: updatedProfile.timeZone,
    },
      userAttributes: {
        UserId: [updatedProfile.id],
        Name: [updatedProfile.name],
        Locale: [updatedProfile.locale],
        Timezone: [updatedProfile.timeZone],
        EmailPreferences: (Object.keys(updatedProfile.notifications) as (keyof UserNotifications)[]).map(
          (key) => updatedProfile.notifications[key]
        ),
        CreatedAt: [new Date(updatedProfile.createdAt * 1000).toISOString()],
        UpdatedAt: [new Date(updatedProfile.updatedAt * 1000).toISOString()],
        AllowedAddresses: [updatedProfile.allowedAddresses],
        UserType: [updatedProfile.type],
      },
  };

  await Analytics.updateEndpoint(endpointConfig);
};

Main.tsx

// import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";
import { Amplify, Auth } from 'aws-amplify';
import "./services/apiService";
import * as Sentry from "@sentry/react";
import { initializeTracking } from "./utils/amplify.utils.ts";

// const isDevelopment = import.meta.env.VITE_ENV === 'dev';

Sentry.init({
  dsn: import.meta.env.VITE_SENTRY_DSN,
  integrations: [
    Sentry.replayIntegration({
      maskAllText: false,
      blockAllMedia: false,
    }),
  ],
  replaysSessionSampleRate: 0.0,
  replaysOnErrorSampleRate: 1.0,
  tracesSampleRate: 0.0
});

Amplify.configure({
  Auth: {
    region: import.meta.env.VITE_AWS_REGION,
    userPoolId: import.meta.env.VITE_COGNITO_USER_POOL_ID,
    userPoolWebClientId: import.meta.env.VITE_COGNITO_CLIENT_ID,
    identityPoolId: import.meta.env.VITE_COGNITO_IDENTITY_POOL_ID,
    oauth: {
      domain: import.meta.env.VITE_COGNITO_DOMAIN,
      scope: ["email", "openid", "profile"],
      redirectSignIn: import.meta.env.VITE_COGNITO_OAUTH_REDIRECT,
      redirectSignOut: import.meta.env.VITE_COGNITO_OAUTH_REDIRECT,
      responseType: "code",
    },
  },
  Analytics: {
    AWSPinpoint: {
      mandatorySignIn: false,
      appId: import.meta.env.VITE_PINPOINT_ANALYTICS,
      region: import.meta.env.VITE_AWS_REGION,
    }
  }
});

async function updateAnalyticsConfig() {
  try {
    const session = await Auth.currentSession();
    const idToken = session.getIdToken();
    const payload = idToken.payload;

    Amplify.configure({
      Analytics: {
        AWSPinpoint: {
          mandatorySignIn: false,
          appId: import.meta.env.VITE_PINPOINT_ANALYTICS,
          region: import.meta.env.VITE_AWS_REGION,
          endpointId: payload?.sub,
        }
      }
    });

    initializeTracking();
  } catch (error) { /* empty */ }
}

updateAnalyticsConfig();
initializeTracking();

const container = document.getElementById("root");
if (container) {
  const root = ReactDOM.createRoot(container);
  root.render(<App />);
}
Samaritan1011001 commented 2 months ago

@soplan I think I understand your concern. May I ask how you are authenticating your users? Which Amplify APIs you are using to signIn and signUp users?