Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Example how to use 'amazon-cognito-identity-js'
import {
CognitoUserPool,
CognitoUserAttribute,
CognitoUser,
AuthenticationDetails,
CognitoUserSession,
CodeDeliveryDetails,
} from 'amazon-cognito-identity-js';
import React, { FC, useState } from 'react';
const userPool = new CognitoUserPool({
UserPoolId: 'eu-central-1_...',
ClientId: '...',
});
const SignUp: FC = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
return (
<form
onSubmit={(e) => {
e.preventDefault();
const attributeList = [
new CognitoUserAttribute({
Name: 'email',
Value: email,
}),
];
userPool.signUp(
email,
password,
attributeList,
null as any, // can be null - typings are wrong
(err, result) => {
if (err) {
console.log(err);
return;
}
console.log('user name is ' + result!.user.getUsername());
console.log('call result: ' + result);
}
);
}}
>
<input
autoComplete="email"
type="text"
value={email}
placeholder="Email"
onChange={(e) => setEmail(e.currentTarget.value)}
/>
<input
type="password"
value={password}
placeholder="Password"
onChange={(e) => setPassword(e.currentTarget.value)}
/>
<button type="submit">Submit</button>
</form>
);
};
const SignIn: FC = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
return (
<form
onSubmit={(e) => {
e.preventDefault();
const authenticationDetails = new AuthenticationDetails({
Username: email,
Password: password,
});
const cognitoUser = new CognitoUser({
Username: email,
Pool: userPool,
});
cognitoUser.authenticateUser(authenticationDetails, {
onSuccess(result) {
console.log('onSuccess', result);
const accessToken = result.getIdToken().getJwtToken();
cognitoUser.getSession(
(err: unknown, session: CognitoUserSession) => {
if (err) {
console.log('getSession: error', result);
} else {
console.log('getSession: session', session);
}
}
);
},
onFailure(error) {
console.log('onFailure', error);
},
});
}}
>
<input
autoComplete="email"
type="text"
value={email}
placeholder="Email"
onChange={(e) => setEmail(e.currentTarget.value)}
/>
<input
type="password"
value={password}
placeholder="Password"
onChange={(e) => setPassword(e.currentTarget.value)}
/>
<button type="submit">Submit</button>
</form>
);
};
const ForgotPassword: FC = () => {
const [email, setEmail] = useState('');
return (
<form
onSubmit={(e) => {
e.preventDefault();
const cognitoUser = new CognitoUser({
Username: email,
Pool: userPool,
});
cognitoUser.forgotPassword({
onSuccess(data: { CodeDeliveryDetails: CodeDeliveryDetails }) {
console.log('onSuccess: forgotPassword', data);
},
onFailure(error) {
console.log('onFailure: forgotPassword', error);
},
});
}}
>
<input
autoComplete="email"
type="text"
value={email}
placeholder="Email"
onChange={(e) => setEmail(e.currentTarget.value)}
/>
<button type="submit">Submit</button>
</form>
);
};
const ResetPassword: FC = () => {
const [email, setEmail] = useState('');
const [code, setCode] = useState('');
const [password, setPassword] = useState('');
return (
<form
onSubmit={(e) => {
e.preventDefault();
const cognitoUser = new CognitoUser({
Username: email,
Pool: userPool,
});
cognitoUser.confirmPassword(code, password, {
onSuccess() {
console.log('onSuccess: confirmPassword');
},
onFailure(error) {
console.log('onFailure: confirmPassword', error);
},
});
}}
>
<input
autoComplete="email"
type="text"
value={email}
placeholder="Email"
onChange={(e) => setEmail(e.currentTarget.value)}
/>
<input
type="text"
value={code}
placeholder="Verification code"
onChange={(e) => setCode(e.currentTarget.value)}
/>
<input
type="password"
value={password}
placeholder="Password"
onChange={(e) => setPassword(e.currentTarget.value)}
/>
<button type="submit">Submit</button>
</form>
);
};
const App: FC = () => {
return (
<>
<h1>Home Page!</h1>
<h2>Sign up</h2>
<SignUp />
<h2>Sign in</h2>
<SignIn />
<h2>Sign out</h2>
<button
onClick={() => {
const cognitoUser = userPool.getCurrentUser();
if (cognitoUser) {
cognitoUser.signOut();
}
}}
>
Sign out
</button>
<h2>Forgot password</h2>
<ForgotPassword />
<h2>Reset password</h2>
<ResetPassword />
</>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment