Auth ,Hub not exported from 'aws-amplify

[ThabisoBlessed]

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

React, Next.js

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

 npm run dev

# Put output below this line

> masswebnextjscalib@0.1.0 build
> next build

   ▲ Next.js 14.0.3

 ⚠ Compiled with warnings

./app/page.js
Attempted import error: 'Hub' is not exported from 'aws-amplify' (imported as 'Hub').

Import trace for requested module:
./app/page.js

./app/page.js
Attempted import error: 'Auth' is not exported from 'aws-amplify' (imported as 'Auth').

Import trace for requested module:
./app/page.js

./app/page.js
Attempted import error: 'Hub' is not exported from 'aws-amplify' (imported as 'Hub').

Import trace for requested module:
./app/page.js

./app/page.js
Attempted import error: 'Auth' is not exported from 'aws-amplify' (imported as 'Auth').

Describe the bug

"use client";

import React, { useState,useEffect } from 'react';
import './configureAmplify';
import { Auth, Hub } from 'aws-amplify';

export default function Home()  {

  const [signedInuser ,setSignedUser] =useState(false);

  async function authListener(){
    Hub.listen("auth",async (data)=>{

      switch (data.payload.event) {
        case "signIn":
            setSignedUser(true);
            break;

        case "signOut":
            setSignedUser(false);
            break;
    }
    try {
      await Auth.currentAuthenticatedUser();
      setSignedUser(true);
      
    } catch (error) {
      
    }


    })
  }

  return (
    <div>
      <h1>Signed in User: {signedInuser}</h1>
      
    </div>
  );
}

Expected behavior

check if user is signed in or not

Reproduction steps

Just import hub

Code Snippet

// Put your code below this line.

Log output

// Put your logs below this line

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": "us-east-1",
    "aws_mobile_analytics_app_id": "5fc078bbfe854932bb8158f30e4e65ec",
    "aws_mobile_analytics_app_region": "us-east-1",
    "Analytics": {
        "AWSPinpoint": {
            "appId": "5fc078bbfe854932bb8158f30e4e65ec",
            "region": "us-east-1"
        }
    },
    "aws_appsync_graphqlEndpoint": "https://ap2hzydqrjfq3om5pym7baaouq.appsync-api.us-east-1.amazonaws.com/graphql",
    "aws_appsync_region": "us-east-1",
    "aws_appsync_authenticationType": "API_KEY",
    "aws_appsync_apiKey": "da2-rpybc2ypofbojlbluny2xwmm5m",
    "aws_cognito_identity_pool_id": "us-east-1:160e70f8-e5cf-49f5-87f7-76c77070634a",
    "aws_cognito_region": "us-east-1",
    "aws_user_pools_id": "us-east-1_HxmALJUSY",
    "aws_user_pools_web_client_id": "i4t9282jpko4k0pmikgivhqu2",
    "oauth": {},
    "aws_cognito_username_attributes": [
        "EMAIL"
    ],
    "aws_cognito_social_providers": [],
    "aws_cognito_signup_attributes": [
        "EMAIL"
    ],
    "aws_cognito_mfa_configuration": "OFF",
    "aws_cognito_mfa_types": [
        "SMS"
    ],
    "aws_cognito_password_protection_settings": {
        "passwordPolicyMinLength": 8,
        "passwordPolicyCharacters": []
    },
    "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

[nadetastic]

Hi @ThabisoBlessed - thank you for opening this issue. Can you confirm which version of aws-amplify you have installed? The reason I ask is with the latest version (6.x.x) released about 2 weeks ago, exports have changed including the Auth class no longer being available. Instead we export specific methods such as signIn() which also get exported from category specific paths. You can view an example of this in our Authentication and Hub documentation.

[ThabisoBlessed]

Hie @nadetastic these are my dependencies with the latest versions how do we carry it out ,

    "@aws-amplify/auth": "^6.0.5",
    "@aws-amplify/core": "^6.0.5",
    "@aws-amplify/ui-react": "^6.0.3",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@fontsource/roboto": "^4.5.8",
    "@fortawesome/fontawesome-svg-core": "^6.4.2",
    "@fortawesome/free-solid-svg-icons": "^6.4.2",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@mui/icons-material": "^5.11.0",
    "@mui/material": "^5.11.7",
    "@mui/x-charts": "^6.0.0-alpha.15",
    "@mui/x-data-grid": "^5.17.23",
    "aws-amplify": "^6.0.5",
    "chart.js": "^4.2.1",
    "react": "^18.2.0",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.12.0",
    "react-pro-sidebar": "^1.0.0",
    "react-router-dom": "^6.20.0",
    "react-toastify": "^9.1.3",
    "recharts": "^2.9.0",
    "uuid": "^9.0.1"
    ```

[ThabisoBlessed]

@nadetastic Im seeing seeing the documemtation , how do i even get currentAuntheticatedUser ,i'm a little lost
Thank you for your feed back.

[ThabisoBlessed]

@nadetastic

 import { signIn } from 'aws-amplify/auth';
 
 export default function SignIn() {

  const [showPassword, setShowPassword] = useState(false);
  // const [signedUser, setSignedUser] = useState(false);
  

  const handleTogglePassword = () => {
    setShowPassword(!showPassword);
  };
  
  const handleSubmit = async (event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    console.log({
      email: data.get('email'),
      password: data.get('password'),
    });


    var name = data.get('email')
    var password = data.get('password')

    if(name=='' || password=='')
    return;

    console.log('Name : '+ name)
    console.log('Password : '+ password)

      // Call signIn with the provided email and password
      await mysignIn({ username: email, password });

  };

  async function mysignIn({ username, password }) {
    
  
    try {
      const { isSignedIn, nextStep } = await signIn({ username, password });
    } catch (error) {
      console.log('error signing in', error);
    }
  }

error the 6.x.x version ,
{data: {…}}
authlogin.jsx:62 {email: 'email@email.com', password: *******}
authlogin.jsx:74 Name : email@email.com
authlogin.jsx:75 Password : *******
authlogin.jsx:88 error signing in Unknown: An unknown error has ocurred.
at assertServiceError (http://localhost:5173/node_modules/.vite/deps/chunk-C7XL4ELF.js?v=a069d143:260:11)
at signInWithSRP (http://localhost:5173/node_modules/.vite/deps/chunk-C7XL4ELF.js?v=a069d143:3054:5)
at async mysignIn (http://localhost:5173/src/containers/auth/authlogin.jsx:105:11)
at async handleSubmit (http://localhost:5173/src/containers/auth/authlogin.jsx:92:5)

[israx]

hello @ThabisoBlessed . Are you calling sing-in on the client side ? you can also console log the underlying error to get more information. e.g error.underlyingError .

[ThabisoBlessed]

@israx my error im calling from client side . error the 6.x.x version ,
{data: {…}}
authlogin.jsx:62 {email: 'email@email.com', password: *******}
authlogin.jsx:74 Name : email@email.com
authlogin.jsx:75 Password : *******
authlogin.jsx:88 error signing in Unknown: An unknown error has ocurred.
at assertServiceError (http://localhost:5173/node_modules/.vite/deps/chunk-C7XL4ELF.js?v=a069d143:260:11)
at signInWithSRP (http://localhost:5173/node_modules/.vite/deps/chunk-C7XL4ELF.js?v=a069d143:3054:5)
at async mysignIn (http://localhost:5173/src/containers/auth/authlogin.jsx:105:11)
at async handleSubmit (http://localhost:5173/src/containers/auth/authlogin.jsx:92:5)

[nadetastic]

@ThabisoBlessed looking at your package.json I would recommend to first remove the packages:
"@aws-amplify/auth"
"@aws-amplify/core"

And only have
"aws-amplify"
"@aws-amplifyui-react"

Once you do so, delete your node_modules and reinstall your dependencies.

[nadetastic]

Hi @ThabisoBlessed following up here - let me know if you still need assistance.

[brianreinhold]

DOnt close yet. I get error
Error: export 'Auth' (imported as 'Auth') was not found in 'aws-amplify'
and all I have in my package.json file is aws-amplify. Worked fine until I updated to 6.0.7 from 5.13

[nadetastic]

Hi @brianreinhold with V6 of aws-amplify, we no longer export the Auth class, but instead provide each api as an export. This is the reason that you are seeing the error message above. We have provided a migration guide here with a specific section of how Auth has changed here.

For example in previous version 5, to signIn a user would look this:

import { Auth } from 'aws-amplify'

Auth.signIn({
  username,
  password
});

But with the latest version 6 it would look like this:

import { signIn } from 'aws-amplify/auth';

signIn({
  username,
  password
})

[brianreinhold]

Yes I have seen that doc. And I stumbled on a lot more documentation. But the biggest problem I am having is imports, changed method names, and parameters. If I get by the imports, intellisense usually can do the rest. SO far these imports have been hard to find. Also for objects like CognitoUser, CognitoUserSession, CognitoRefreshToken and
Amplify.configure(
{
Auth: cognito
}
);
if they still exist.
There are lots of methods too that have changed names and parameters. It would be nice if there were a list that mapped the version 5 to the version 6; I have found some but not all. Are all the Auth.* methods imported in aws-amplify/auth?

[nadetastic]

@brianreinhold the second link that I shared above contains a mapping of all the v5 o v6 auth methods and also points out the ones that have been deprecated. Are there specific methods that you are not finding in that link?

Re sharing the second link with the mappings:

• https://docs.amplify.aws/react/build-a-backend/auth/auth-migration-guide/

As for types, v6 provides types for inputs and outputs. For example, signIn() has type SignInInput and type SignInOutput

[brianreinhold]

Yes I am going through that piecemeal. I have lots of methods that I use with MFA and password recovery, forget, change, etc. But I also used a lot of aws-amplify objects like CognitoUser, etc. that I pointed out above. The examples use nameless objects which are different than the ones I am using and that it making it very difficult. I personally dislike nameless objects (especially when trying to follow someone else's code and I will never force someone to go through that agony with my code. If aws-amplify no longer defines objects like CognitoUser I will eventually define my own interfaces to to define those nameless objects once I figure them out.

Nameless objects like this used to have Object names like CognitoUser.

{
  const {
    isSignUpComplete,
    userId,
    nextStep
  } = await signUp(**{
    username,
    password,
    options: {
      userAttributes: {
        email,
        phone_number
      },
      validationData
    }**
  });

This is what is making the transition so difficult - especially when I make extensive use of the methods and objects. It was a lot easier when the signIn() method returned a Promise object whose structure I could get via an import. I used lots of methods on that CognitoUser object!!

[brianreinhold]

ITs been a struggle but slowly I am getting the pieces of the transitions. I just made use of so many objects that have disappeared. I am looking at the sign in standard case and there is no expression of what the possible values are of 'nextStep'. In the confirmation case, they are shown. In the end I am only interested in the confirmation case with MFA. Does the standard sign in include MFA or is that considered confirmation by aws-amplify?

[brianreinhold]

Another issue. I get a UserAlreadyAuthenticatedException but I cannot find where I can import this class. Spent hours looking for this kind of information. Why aren't these documented?

[KushMyDaily]

https://docs.amplify.aws/javascript/build-a-backend/auth/auth-migration-guide/
Check this and migrate all v5 -> v6

[Deanfei]

Shame on aws-amplify team having these so many breaking changes. It's super poor engineering upgrade practices.

[mgreiner79]

@israx so, now how can i get my JWT? I used to be able to do this:

import { Auth } from 'aws-amplify';

const getIdToken = async (): Promise<string> => {
  const session = await Auth.currentSession();
  return session.getIdToken().getJwtToken();
};

[brianreinhold]

@mgreiner79
Maybe something like
import { currentSession } from 'aws-amplify/auth';

I have not tried. I have given up moving to version 6. It is too poorly documented and too riddled with impossible errors.

[mgreiner79]

I found it.

import { fetchAuthSession } from 'aws-amplify/auth'
const session = await fetchAuthSession();
const token = session.tokens?.idToken

[brianreinhold]

Gees...talk about a complete re-write of an API. I think I will hold off on 6 until its life or death!