Using backend for both React Native and Custom Admin page with React JS

[fistofzen]

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, React Native

Amplify APIs

Authentication, REST API, GraphQL API, Storage

Amplify Version

v6

Amplify Categories

auth, storage, function, api

Backend

None

Environment information

System:
OS: macOS 14.3.1
CPU: (8) arm64 Apple M3
Memory: 76.47 MB / 8.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.11.1 - /usr/local/bin/node
Yarn: 1.22.21 - /usr/local/bin/yarn
npm: 10.2.4 - /usr/local/bin/npm
Browsers:
Chrome: 124.0.6367.208
Safari: 17.3.1
npmGlobalPackages:
@aws-amplify/cli: 12.12.0

Describe the bug

I created a backend with using amplify on a react native app .
Then I created another React JS app which is an admin for this react native app. they are using the same backend.

I deployed the app to the aws but I want only admins to login to the custom react js admin page. I am using withAuthenticator but I didnt find an option about cognito groups.

End users will use React native and admins will use admin app.

how can I achieve that ?

Expected behavior

prevent normal users to login to the custom admin website.

Reproduction steps

reploy react js app to the aws
login with admin user

Code Snippet

// Put your code below this line.

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

No response

[israx]

hello @fistofzen. A potential solution is to create different app client ids for your userpool and assign custom scopes to each one. You need to authenticate with either hosted UI or a 3red IdP in order to get these custom scopes in your access token.

Bellow are the steps on how to add custom scopes to an app client id

1. Go to the App clients and analytics section and create one app client id for web and other for react native. You can find this section under the App integration tab of your userpool.
2. Go to the Resource servers section and create a resource server for your userpool and assign some custom scopes. You can find this section under the App integration tab of your userpool.
3. Go to the created app client id and go to Hosted UI section, and set up OAuth settings.
4. assign the app client ids to your apps

Remember that you need to authenticate with hosted UI or configure a different IdP provider in order to get those scopes in your access tokens.

[fistofzen]

Hello israx, Thank you for the answer.
How can I assign the app client ids to your apps ? and also, how can I set up OAuth settings?

Regards.

[biller-aivy]

Just use a pretoken generation lambda to add some groups. Otherwise there is a second triggered lambda after registration to set the user to a group like admin.

[fistofzen]

actually I have A user which is assigned to a group "Admins". And I want only that user to successfully sign in to the admin app. React Native and ReactJS is using same identity pool.

[fistofzen]

hello @fistofzen. A potential solution is to create different app client ids for your userpool and assign custom scopes to each one. You need to authenticate with either hosted UI or a 3red IdP in order to get these custom scopes in your access token.

Bellow are the steps on how to add custom scopes to an app client id

1. Go to the App clients and analytics section and create one app client id for web and other for react native. You can find this section under the App integration tab of your userpool.
2. Go to the Resource servers section and create a resource server for your userpool and assign some custom scopes. You can find this section under the App integration tab of your userpool.
3. Go to the created app client id and go to Hosted UI section, and set up OAuth settings.
4. assign the app client ids to your apps

Remember that you need to authenticate with hosted UI or configure a different IdP provider in order to get those scopes in your access tokens.

When I go with this option I am getting error after I sign in.

[israx]

hello @fistofzen can you provide the following info ?

1. How did you configure hosted UI. Can you show a screenshoot of the hosted ui settings you setup ?
2. How are you login ? are you using the signInWithRedirect API ?
3. How are you configuring Amplify for RN and Web ? Please attach some code snippets for both configurations without showing sensitive values
4. What API is throwing that error you attached above ? Seems you are using graphql and getting UnAuthorized exceptions. Please make sure to associate your userpool with your identity pool

[israx]

Regarding @biller-aivy comment, you can setup a pre-token lambda but you need to enable Advance Security features which will increase your price per user exponentially

[fistofzen]

Hello İsrax,
1 -

2 - I am not using signInWithRedirect,
3 -

4 - yes graphql.

Here I only want to signin users who are in admin group. no others.

[fistofzen]

[israx]

hello @fistofzen . In order to get the custom scope in your access token. You need to configure OAuth with Amplify — We have some documentation about that. Then you need to make sure to call the signInWithRedirect API.