Как я могу решить эту проблему радиобатчу для моего пользовательского атрибута пользователя AWS Cognito во время создани ⇐ Javascript

[Anonymous]

У меня есть 2 пользовательских атрибута в моем пуле пользователей Cognito. Когда пользователь создает учетную запись, он назначает их одной из групп, а затем направляет пользователя на этот опыт. Код работает совершенно нормально, когда я использую ввод текстового поля < /p>
'custom:userType': {
label: 'User Type (You are not required to have a therapist)',
placeholder: 'Enter "groupA" or "groupB"',
required: true,
order: 2,
},

Тем не менее, когда я меняю на радиопроизводство, используя этот код, радиопроизводительные кнопки не отображаются (см. Image) Как мне это исправить ??? < /p>
'custom:userType': {
label: 'User Type',
required: true,
order: 2,
type: 'radio',
options: [
{ label: 'groupA', value: 'groupA' },
{ label: 'groupB', value: 'groupB' },
],
},
< /code>
** Полный код пример
** < /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;
}



Подробнее здесь: https://stackoverflow.com/questions/794 ... er-pool-at