import { useSignUp } from 'cogreact';

const region = process.env.REGION;
const identityPoolId = process.env.IDENTITY_POOL_ID;
const userPoolId = process.env.USER_POOL_ID;
const userPoolWebClientId = process.env.USER_POOL_WEB_CLIENT_ID;

if (!region || !identityPoolId || !userPoolId || !userPoolWebClientId) {
  throw new Error('Please set environment variables.');
}

export function App() {
  return (
    <BrowserRouter>
      <RecoilRoot>
        <Cogreact
          AuthConfig={{
            region,
            identityPoolId,
            userPoolId,
            userPoolWebClientId,
          }}
        >
          <YourComponent>
        </Cogreact>
      </RecoilRoot>
    </BrowserRouter>
  );
}

const YourComponent = () => {
  const { signUp, loading, error } = useSignUp()
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [name, setName] = useState('');

  const handleClick = () => {
    signUp({ email, password, attributes: { name: name } });
  };

  return (
    <div>
      <input type="text" placeholder="email" value={email} onChange={(e) => setEmail(e.currentTarget.value)} />
      <input
        type="password"
        placeholder="password"
        value={password}
        onChange={(e) => setPassword(e.currentTarget.value)}
      />
      <input type="text" placeholder="text" value={name} onChange={(e) => setName(e.currentTarget.value)} />
      <button onClick={handleClick}>Sign Up</button>
    </div>
  );
}

import { PrivateRoute, LoginRoute, CompleteNewPasswordRoute } from 'cogreact';

export function App() {
  return (
    <RecoilRoot>
      <BrowserRouter>
        <CogreactWrapper>
          <Routes>
            {/* Private routes is here. */}
            <Route element={<PrivateRoute />}>
              <Route path="/" element={<>Index</>} />
              <Route path="private1" element={<>Private 1</>} />
              <Route path="private2" element={<>Private 2</>} />
            </Route>

            {/* Sign in routes is here. */}
            <Route element={<SignInRoute />}>
              <Route path="login" element={<>Login</>} />
            </Route>

            {/* Complete new password routes is here. */}
            <Route element={<CompleteNewPasswordRoute />}>
              <Route path="complete-new-password" element={<>Complete New Password</>} />
            </Route>
          </Routes>
        </CogreactWrapper>
      </BrowserRouter>
    </RecoilRoot>
  );
}