amplify-ui: Social login is not properly doing redirect (Only Angular)

Before opening, please confirm:

I have searched for duplicate or closed issues and discussions.
I have read the guide for submitting bug reports.
I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Angular

Amplify APIs

Authentication

Amplify Version

Amplify Categories

No response

Backend

Amplify CLI

Environment information

System: OS: Windows 11 10.0.22621 CPU: (8) x64 Intel® Core™ i7-10510U CPU @ 1.80GHz Memory: 4.91 GB / 15.78 GB Binaries: Node: 18.16.1 - C:\Program Files\nodejs\node.EXE npm: 9.5.1 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Chromium (120.0.2210.133) Internet Explorer: 11.0.22621.1 npmPackages: @angular-devkit/build-angular: ^16.1.0 => 16.2.11 @angular/animations: ^16.1.0 => 16.2.12 @angular/cdk: ^16.2.12 => 16.2.12 @angular/cli: ~16.1.0 => 16.1.8 @angular/common: ^16.1.0 => 16.2.12 @angular/compiler: ^16.1.0 => 16.2.12 @angular/compiler-cli: ^16.1.0 => 16.2.12 @angular/core: ^16.1.0 => 16.2.12 @angular/forms: ^16.1.0 => 16.2.12 @angular/material: ^16.2.12 => 16.2.12 @angular/platform-browser: ^16.1.0 => 16.2.12 @angular/platform-browser-dynamic: ^16.1.0 => 16.2.12 @angular/router: ^16.1.0 => 16.2.12 @aws-amplify/cli: ^12.10.1 => 12.10.1 @aws-amplify/ui-angular: ^5.0.6 => 5.0.6 @types/jasmine: ~4.3.0 => 4.3.6 aws-amplify: ^6.0.11 => 6.0.11 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/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 () jasmine-core: ~4.6.0 => 4.6.0 karma: ~6.4.0 => 6.4.2 karma-chrome-launcher: ~3.2.0 => 3.2.0 karma-coverage: ~2.2.0 => 2.2.1 karma-coverage-coffee-example: 1.0.0 karma-jasmine: ~5.1.0 => 5.1.0 karma-jasmine-html-reporter: ~2.1.0 => 2.1.0 rxjs: ~7.8.0 => 7.8.1 rxjs/ajax: undefined () rxjs/fetch: undefined () rxjs/operators: undefined () rxjs/testing: undefined () rxjs/webSocket: undefined () tslib: ^2.3.0 => 2.6.2 (2.6.1, 1.14.1) typescript: ~5.1.3 => 5.1.6 zone.js: ~0.13.0 => 0.13.3 npmGlobalPackages: @angular/cli: 16.1.0 @aws-amplify/cli: 12.10.0 aws-cdk: 2.108.1 serverless: 3.34.0

Describe the bug

Using this sample https://ui.docs.amplify.aws/angular/connected-components/authenticator/advanced Access Auth State

<!-- Render loading if authStatus is still configuring  -->
<ng-container *ngIf="authenticator.authStatus === 'configuring'">
  Loading...
</ng-container>

<!-- Only render this if there's an authenticated user -->
<ng-container *ngIf="authenticator.authStatus === 'authenticated'">
  Welcome back!
</ng-container>

<!-- Render sign-in screen otherwise with authenticator -->
<ng-container *ngIf="authenticator.authStatus !== 'authenticated'">
  <amplify-authenticator></amplify-authenticator>
</ng-container>

This code works perfectly fine when login in with users from user pool

When I run social login and login via facebook or gmail

<ng-container *ngIf="authenticator.authStatus === 'authenticated'">
  Welcome back!
</ng-container>

does not work properly

it requires page refresh to see the content if I only aprove it on FB and go further see blank screen by default

Expected behavior

f5 in browser is shuold not be required to see content in single page application after logging in via social links

Reproduction steps

Create simple app https://ui.docs.amplify.aws/angular/connected-components/authenticator/advanced

<!-- Render loading if authStatus is still configuring  -->
<ng-container *ngIf="authenticator.authStatus === 'configuring'">
  Loading...
</ng-container>

<!-- Only render this if there's an authenticated user -->
<ng-container *ngIf="authenticator.authStatus === 'authenticated'">
  Welcome back!
</ng-container>

<!-- Render sign-in screen otherwise with authenticator -->
<ng-container *ngIf="authenticator.authStatus !== 'authenticated'">
  <amplify-authenticator></amplify-authenticator>
</ng-container>

Problem: after confirming in fb you are redirected back and only see blank screen if you press browser refload (f5) it fixes the issues

issues also is not reproduced if working with users that are managed by user pool directly

Code Snippet

// Put your code below this line.

Log output

<ng-container *ngIf=“authenticator.authStatus === ‘configuring’”> Loading… </ng-container>

<ng-container *ngIf=“authenticator.authStatus === ‘authenticated’”> Welcome back! </ng-container>

<ng-container *ngIf=“authenticator.authStatus !== ‘authenticated’”> <amplify-authenticator></amplify-authenticator> </ng-container>

aws-exports.js

/* eslint-disable */ // WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = { “aws_project_region”: “", “aws_cognito_identity_pool_id”: "", “aws_cognito_region”: "", “aws_user_pools_id”: "", “aws_user_pools_web_client_id”: "", “oauth”: { “domain”: "***”, “scope”: [ “phone”, “email”, “openid”, “profile”, “aws.cognito.signin.user.admin” ], “redirectSignIn”: “https://showcase.grorain.com”, “redirectSignOut”: “https://showcase.grorain.com”, “responseType”: “code” }, “federationTarget”: “COGNITO_USER_POOLS”, “aws_cognito_username_attributes”: [], “aws_cognito_social_providers”: [ “FACEBOOK”, “GOOGLE” ], “aws_cognito_signup_attributes”: [ “EMAIL”, “GIVEN_NAME” ], “aws_cognito_mfa_configuration”: “OFF”, “aws_cognito_mfa_types”: [ “SMS” ], “aws_cognito_password_protection_settings”: { “passwordPolicyMinLength”: 6, “passwordPolicyCharacters”: [ “REQUIRES_LOWERCASE” ] }, “aws_cognito_verification_mechanisms”: [ “EMAIL” ] };

export default awsmobile;

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

No response

About this issue

Original URL
State: open
Created 6 months ago
Comments: 36 (4 by maintainers)

Most upvoted comments

HI @israx I confirm this code works as expected https://github.com/aws-amplify/amplify-ui/issues/5048

Original code does not work https://github.com/aws-amplify/amplify-ui/issues/5048

so @cwomack suggestion can be used as workaround for sure

yuriygavriluk on Mar 5, 2024

@yuriygavriluk, glad you’ve got a workaround now at least! It sounds like this may need some further investigation from the amplify-ui team to determine if there’s a feature request related to the change detection with Angular in particular.

Going to cc: @calebpollman and transfer the issue back to that repo for next/final steps on this issue.

cwomack on Mar 7, 2024

@cwomack I confirm the code you provided works as expected State login\logout changed without any neccessety of extra reloading page Thanks a lot

Will check with the original code

I will check the original code if this works or not perhapse it will help to localyze the issue

yuriygavriluk on Mar 5, 2024

I think some Angular versions don’t re-render components on window redirect, thus not calling any APIs that allow to verify the user is authenticated, is it possible for you to listen to the signInWithRedirect hub event and then update state as desired ?

israx on Jan 24, 2024

react sample works just fine https://showcase.grorain.com/

simple code

<Authenticator>
        {({ signOut, user }) => (
          <main>
            <h1>Hello {user.username}</h1>
            <button onClick={signOut}>Sign out</button>
          </main>
        )}
      </Authenticator>

After being rediected see proper state

For me sounds like something wrong with Angular packages and state is not managed properly for some reason

yuriygavriluk on Jan 18, 2024

I will now try to use react To see if it makes difference or not This will naswer if the issue in JS or not

yuriygavriluk on Jan 18, 2024

@yuriygavriluk Got it. As you were able to repro the issue without using the authenticator it seems likely that the issue is in your application setup. Going to route this issue back to Amplify JS for further triage

calebpollman on Jan 18, 2024