Wie kann ich dieses Optionsknopf -Problem für mein benutzerdefiniertes AWS Cognito User Pool -Attribut während der Konto ⇐ JavaScript

[Anonymous]

Ich habe 2 benutzerdefinierte Attribute in meinem Cognito -Benutzerpool. Wenn der Benutzer ein Konto erstellt, wird er einer der Gruppen zugewiesen und dann den Benutzer zu dieser Erfahrung weitergeleitet. Der Code funktioniert völlig in Ordnung, wenn ich ein Textfeld eingibt < /p>

Code: Select all

'custom:userType': {
label: 'User Type  (You are not required to have a therapist)',
placeholder: 'Enter "groupA" or "groupB"',
required: true,
order: 2,
},

Wenn ich es jedoch mit diesem Code in das Optionsfeld ändere, werden die Optionsfelder nicht angezeigt (siehe Bild) Wie repariere ich das ??? Verwenden Sie entweder ein Optionsfeld oder einen Dropdown

Code: Select all

'custom:userType': {
label: 'User Type',
required: true,
order: 2,
type: 'radio',
options: [
{ label: 'groupA', value: 'groupA' },
{ label: 'groupB', value: 'groupB' },
],
},
< /code>
** Full Code Beispiel
** < /p>
// RootAuth.jsx
import React, { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import {
Authenticator,
ThemeProvider,
createTheme,
} from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
import { fetchAuthSession } from 'aws-amplify/auth';
import { Amplify } from 'aws-amplify';
import awsconfig from './aws-exports';

import { useDataContext } from './context/DataContext';
import { createProfileAfterSignUp } from './utils/createUserProfile';

// Configure Amplify
Amplify.configure(awsconfig);

const myCustomTheme = createTheme({
name: 'MyCustomTheme',
tokens: {
colors: {
brand: {
primary: {
100: '#5a3eaf', // your main purple
},
},
},
components: {
tabs: {
item: {
_active: {
color: '#5a3eaf',
borderColor: '#5a3eaf',
},
},
},
button: {
link: {
color: '#5a3eaf',
},
primary: {
backgroundColor: '#5a3eaf',
},
},
},
},
});

export default function RootAuth() {
const formFields = {
signUp: {
email: { label: 'Email', type: 'email', required: true, order: 1 },

given_name: {
label: 'First Name',
placeholder: 'Enter your first name',
required: true,
order: 3,
},
family_name: {
label: 'Last Name',
placeholder: 'Enter your last name',
required: true,
order: 4,
},
password: {
label: 'Password',
placeholder: 'Enter your password',
required: true,
order: 5,
},
confirm_password: {
label: 'Confirm Password',
placeholder: 'Confirm your password',
required: true,
order: 6,
},
'custom:userType': {
label: 'User Type',
required: true,
order: 2,
type: 'radio',
options: [
{ label: 'groupA', value: 'groupA' },
{ label: 'groupB', value: 'groupB' },
],
},
},
};

return (

{/*
This div is absolutely positioned to fill the viewport (no extra scroll)
and is centered so that the Authenticator sits in the middle on mobile.
*/}
style={{
position: 'fixed',
top: 0,
right: 0,
bottom: 0,
left: 0,
margin: 0,
padding: 0,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
// Choose overflow: 'hidden' if you never need scrolling;
// or 'auto' if your form might grow taller than the screen.
overflow: 'hidden',
backgroundColor: '#fff', // so we don't see underlying page
zIndex: 9999, // ensure it sits above any nav
}}
>

{({ user }) => {
if (!user) return null;
return ;
}}



);
}

function PostSignInRedirect() {
const navigate = useNavigate();
const { setUserAndFetchData } = useDataContext();

useEffect(() => {
async function handleSignIn() {
try {
console.log('Fetching auth session...');
const session = await fetchAuthSession();
const payload = session.tokens.idToken.payload;
console.log('ID token payload:', payload);

// Attempt to create user profile if it doesn't exist
try {
console.log('Attempting to create user profile...');
await createProfileAfterSignUp(payload);
} catch (error) {
console.warn(
'User profile creation error (may already exist):',
error
);
}

// Set user in context & conditionally fetch data
setUserAndFetchData(payload);

// Route based on user type
const userTypeValFromCustom =
payload['custom:userType']?.toLowerCase() || '';
let userTypeVal = userTypeValFromCustom;

if (!userTypeVal) {
const groups = payload['cognito:groups'] || [];
if (groups.includes('groupA')) {
userTypeVal = 'groupA';
} else if (groups.includes('groupB')) {
userTypeVal = 'groupB';
}
}

if (userTypeVal === 'groupA') {
navigate('/groupA');
} else {
navigate('/groupB');
}
} catch (error) {
console.error('Error during post-sign-in:', error);
navigate('/groupB');
}
}
handleSignIn();
}, [navigate, setUserAndFetchData]);

return null;
}