How to configure external provider sign in with Auth0 in Gen2

[VinayakSingh64]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

Angular

Which UI component?

Authenticator

How is your app built?

npm install and then ng serve

What browsers are you seeing the problem on?

Chrome, Firefox, Microsoft Edge, Safari

Which region are you seeing the problem in?

eu-central-1

Please describe your bug.

I am using Auth0 by okta to have sign in for users who are in SAML or OIDC group trying to sign in to amplify authenticator. But once they try to sign in the authenticator replies with "user not found". There is no official document for users trying to sign in as external provider by auth0. How do i let those users sign in even when they are available in the same cognito userpool but not as default users?

What's the expected behaviour?

External provider users coming from auth0 should be able to log in via amplify authenticator like normal users who are present in normal userpool

Help us reproduce the bug!

Have a user as external provider in cognito userpool group and have a sign in experience via amplify authenticator, but make sure the user tries the auth0 sign in experience

Code Snippet

// Put your code below this line.

Amplify.configure({
Auth: {
Cognito: {
userPoolId: environment.userPoolId,
userPoolClientId: environment.userPoolClientId,
},
}
});

I have added this code in app.module.ts file and i want to put the auth0 code also so that it authenticates the user via the amplify authenticator.

Also i have added resource.ts file in auth folder created manually under amplify folder and here is the code

amplify/auth/resource.ts

import { defineAuth, secret } from '@aws-amplify/backend';


export const auth = defineAuth({
  loginWith: {
    email: true,
    externalProviders: {
      oidc: [
        {
         name: 'auth0',
          clientId: secret('auth0_CLIENT_ID'),
          clientSecret: secret('auth0_CLIENT_SECRET'),
          issuerUrl: '<your-issuer-url>',
        },
      ],
      logoutUrls: ['http://localhost:3000/', 'https://mywebsite.com'],
      callbackUrls: [
        'http://localhost:3000/profile',
        'https://mywebsite.com/profile',
      ],
    },
  },
});

Also i created a auth-client-js.js file under src

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

await signInWithRedirect({
  provider: {
    custom: 'auth0'
  }
});

Still i am unable to configure the OIDC provider. Help me out with the configuration

Console log output

No response

Additional information and screenshots

No response

[zchenwei]

This question seems related to backend configs.

[VinayakSingh64]

okay but i have configured the auth via code, not via amplify init command.

[josefaidt]

Hey @VinayakSingh64 👋 thanks for raising this! What issues are you encountering when attempting to sign in?

Are you receiving "user not found" on sign-up? Is this coming from the Amplify lib or the auth0 integration?

[VinayakSingh64]

I am getting "user does not exist" reply from authenticator when i try to sign in via amplify authenticator, For normal users in cognito userpool it is working fine but when i try with an external provider user it shows "user does not exist"

Also i think i am getting "user doesnt exist" from Amplify lib bcoz auth0 integration is not working

[VinayakSingh64]

Also i would like to mention that i havent configured the secret in Aws amplify console, rather i used the auth setup in code itself, i am doing the same thing for the secrets also, like hardcoding it.

clientId: secret('abc12345') like this.

[VinayakSingh64]

Also is there a way where the clientID and clientsecret is taken from cognito not via amplify backend. This makes the task easier for me as i am tryingg to authenticate SSO users via authenticator using external proviser auth0.

[josefaidt]

Hey @VinayakSingh64 instead of hardcoding your secrets, you can use ampx sandbox secret set to create secrets for your sandbox https://docs.amplify.aws/react/reference/cli-commands/#npx-ampx-sandbox-secret. These secrets can then be used by name with the secret() function. For example:

npx ampx sandbox secret set AUTH0_CLIENT_ID

// amplify/auth/resource.ts
import { defineAuth, secret } from "@aws-amplify/backend"

export const auth = defineAuth({
  loginWith: {
    email: true,
    externalProviders: [
      {
        clientId: secret("AUTH0_CLIENT_ID"),
        // ...
      },
    ],
  }
})

the secrets are stored in SSM Parameter Store and are applied to the auth resource during deployment to prevent leaking the values in plaintext to the rendered CloudFormation templates for your backend (found in .amplify/artifacts)
https://docs.amplify.aws/react/deploy-and-host/fullstack-branching/secrets-and-vars/

[VinayakSingh64]

I have tried with the command but the command is giving an "could not determine executable error"

[VinayakSingh64]

Is there any other way to set the secrets?

[josefaidt]

Hey @VinayakSingh64 are you executing that command from the root of your project? Do you have the @aws-amplify/backend-cli package installed?

[VinayakSingh64]

Yes i have @aws-amplify/backend-cli package installed and i am executing the command from the root of the project

[ykethan]

Hey @VinayakSingh64, thanks for chatting on discord, glad to hear you were able to mitigate the issue by installing @aws-amplify/backend-cli to your project.