<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: bnjr</title>
    <description>The latest articles on DEV Community by bnjr (@bnjr).</description>
    <link>https://dev.to/bnjr</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F703258%2Ffc5942ee-fd6a-40c4-8c0b-15a4d26b9af9.png</url>
      <title>DEV Community: bnjr</title>
      <link>https://dev.to/bnjr</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/bnjr"/>
    <language>en</language>
    <item>
      <title>Cognito user verification via SNS stopped working?</title>
      <dc:creator>bnjr</dc:creator>
      <pubDate>Tue, 22 Aug 2023 18:39:29 +0000</pubDate>
      <link>https://dev.to/bnjr/cognito-user-verification-via-sns-stopped-working-3nmn</link>
      <guid>https://dev.to/bnjr/cognito-user-verification-via-sns-stopped-working-3nmn</guid>
      <description>&lt;p&gt;Some time back, AWS started restricting the SMSs sent from SNS service. The restriction is for senders without any Origination IDs aka long code (phone number) or short code. This is basically to stop spammers.&lt;/p&gt;

&lt;p&gt;If user verification from Cognito was working before, and it does not now, the reason would be this.&lt;/p&gt;

&lt;p&gt;You would see this error in the logs.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Vzm4HL6O--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ylrvlrzqjkse892hrbt1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Vzm4HL6O--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ylrvlrzqjkse892hrbt1.png" alt="Image description" width="800" height="74"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;For this, you would need to get an Origination ID from AWS Pinpoint.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--GK7qbjzH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/klwh2rwqggtnyqfh0x3i.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--GK7qbjzH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/klwh2rwqggtnyqfh0x3i.png" alt="Image description" width="800" height="71"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;which takes you here&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--5iO2f6Ed--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kq6y0e7gwx39fwtjnlc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5iO2f6Ed--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kq6y0e7gwx39fwtjnlc.png" alt="Image description" width="800" height="122"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;From there, go to request phone number using this form&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--cdPYOUa8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m9w0387wxcjornqy3u76.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--cdPYOUa8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m9w0387wxcjornqy3u76.png" alt="Image description" width="800" height="880"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This would cost $2/month.&lt;/p&gt;

&lt;p&gt;Once this is set up, the verify code should start coming.&lt;/p&gt;

</description>
      <category>aws</category>
      <category>cognito</category>
      <category>sns</category>
      <category>amplify</category>
    </item>
    <item>
      <title>Authentication with username, email and phone using AWS Cognito</title>
      <dc:creator>bnjr</dc:creator>
      <pubDate>Tue, 10 May 2022 17:42:59 +0000</pubDate>
      <link>https://dev.to/bnjr/authentication-with-username-email-and-phone-using-aws-cognito-2e2b</link>
      <guid>https://dev.to/bnjr/authentication-with-username-email-and-phone-using-aws-cognito-2e2b</guid>
      <description>&lt;p&gt;AWS Amplify comes with authentication services that can be installed via the Amplify CLI as described &lt;a href="https://docs.amplify.aws/cli/auth/overview/" rel="noopener noreferrer"&gt;here&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;But the problem with the options that CLI gives is that that one can choose only anyone one of the 4:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;username&lt;/li&gt;
&lt;li&gt;email&lt;/li&gt;
&lt;li&gt;phone&lt;/li&gt;
&lt;li&gt;email or phone (this will set to the first logged in option -&amp;gt; either email or phone)
&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F66stbxuv9kqpg1nf7wa6.png" alt="Image description"&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Now as an app developer we would like to give the following options to the user. Ability to login via email or phone (username doesn't makes sense anymore) always.&lt;/p&gt;

&lt;p&gt;If Cognito is setup directly without using Amplify then it is possible to do this setup using these options:&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa8jb8cpdtp0gnypfyejv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa8jb8cpdtp0gnypfyejv.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Amplify does give you an option to import an existing Cognito User Pool but then the lifecycle, settings and utilities are not available. So you lose some to get some.&lt;/p&gt;

&lt;p&gt;But there is a feature that AWS has come up with that can give us best of both.&lt;/p&gt;

&lt;p&gt;This feature is the &lt;a href="https://docs.amplify.aws/cli/auth/override/" rel="noopener noreferrer"&gt;override&lt;/a&gt; option. This will generate an override.ts file that will allow one to get into the details of the Cognito options.&lt;/p&gt;

&lt;p&gt;So for our requirement of enabling user to login with email and also with phone we would need to add this to the override.ts. And the file would look like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import { AmplifyAuthCognitoStackTemplate } from '@aws-amplify/cli-extensibility-helper';

export function override(resources: AmplifyAuthCognitoStackTemplate) {
    resources.userPool.aliasAttributes = ['email', 'phone_number',];
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;With this added, Amplify will build a Cognito User Pool that will have the right sign-in options:&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj1jq58cdgv9rk8en5mix.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj1jq58cdgv9rk8en5mix.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;So the sign up would work like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const response = await Auth.signUp({
      username: v4(),
      password: password,
      attributes: {
        email: email, //Pass this
        phone_number: phone,// or this
      },
    })
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;One can add the other attribute e.g. phone like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;async function addPhone(phone: string) {
  try {
    const user = await Auth.currentAuthenticatedUser()
    const responseUpdate = await Auth.updateUserAttributes(user, {
      phone_number: phone,
    })
    console.log({responseUpdate})
  } catch (error) {
    console.error('error adding phone:', error)
  }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;and login using phone like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;async function loginPhone(phone: string) {
  try {
    const authUser = await Auth.signIn(phone, password)
    console.log({authUser})
  } catch (error) {
    console.error('error logging in:', error)
  }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Refer to the repo &lt;a href="https://github.com/bnjr/prototypes/blob/5408a3002b971c8775fc017616d73e6a86ac9122/src/components/create-user.tsx" rel="noopener noreferrer"&gt;here&lt;/a&gt;.&lt;br&gt;
The following functions are available to test out the Cognito User Pool setup:&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkfdlb7f8hn8ttwmrzq3y.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkfdlb7f8hn8ttwmrzq3y.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>aws</category>
      <category>authentication</category>
      <category>amplify</category>
      <category>cognito</category>
    </item>
  </channel>
</rss>
