How to create a 2-step verification screen

Ionic Design Kit, built on a design base of Ionic Framework components, simplifies app development by providing designers with a range of pre-made elements. Designers can effortlessly pick and place elements, eliminating the need to create components from scratch. For developers, this means no complex coding – all components are sourced from the Ionic Framework. The result is a speedy, efficient, and collaborative process, making the Ionic Design Kit essential for both designers and developers.

The 2-Step Verification Screen serves as a pivotal element in user interface design, functioning as a guardian for user accounts within an application. It plays a crucial role in enhancing security measures and safeguarding user data by implementing multiple layers of authentication. By presenting a user-friendly and streamlined interface, the 2-Step Verification Screen ensures a secure yet hassle-free authentication process for users.

This guide aims to provide a comprehensive overview, empowering designers and developers to seamlessly integrate a user-centric 2-Step Verification Screen into their applications. This seamless integration is facilitated by leveraging design components from the Ionic Kit, which is rooted in the robust framework of the extensive Ionic library.

1. Install Ionic CLI with the command

Creating a project with the Ionic CLI

npm i -g @ionic/cli

2. Create a new project

To create a new project, run the following command.

ionic start two-step-verification blank --type=react

3. Get inside the project directory

cd two-step-verification

4. Create a new page

Create page TwoStepVerification.tsx inside src/pages and add code.

import { IonPage } from '@ionic/react';

const TwoStepVerification: React.FC = () => {
  return (
    <IonPage></IonPage>
  );
};
export default TwoStepVerification;

Please make sure that you've added routing in src/App.tsx for the created page. All Ionic framework components that will be used below should be imported similarly to the IonPage component.

5. Layout the structure

For convenience, we will be using the layout structure recommended by Ionic for our screen. This allows us to add header code and content inside the <IonPage></IonPage>.

<IonPage>
  <IonHeader>
    <IonToolbar>
      <IonTitle>Logotype</IonTitle>
    </IonToolbar>
  </IonHeader>
  <IonContent className='ion-padding'>
  </IonContent>
</IonPage>

6. Assign the class to the page content

Add the ion-text-center class to the IonContent component.

<IonContent className='ion-padding ion-text-center'></IonContent>

This will apply styling to the content within the IonContent, providing centering the text according to Ionic's guidelines.

7. Add the tag with Text component with the heading

Inside the IonContent component, add a <div> tag with the style height: 48px to create a space between components and add the IonText component within the IonContent section. Inside the IonText component, include an h1 element with the text '2-step verification'.

<IonContent className='ion-padding ion-text-center'>
  <div style={{height: '48px'}}></div>
  <IonText>
    <h1>2-step verification</h1>
  </IonText>
</IonContent>

8. Add another Text component

Add one more IonText component with the color='medium' attribute to define the color of the text inside. Inside the IonText component, include a <p> element with the text 'We have sent a verification code via SMS to +123 4** *** **5. Please enter it here.'.

<IonContent className='ion-padding ion-text-center'>
  ...
  <IonText color='medium'>
    <p>
      We have sent a verification code via SMS to +123 4** *** **5. Please enter it here.
    </p>
  </IonText>
</IonContent>

9. Encapsulate the code-sending form

Next, within the IonContent section, add a <form> tag to encapsulate the code-sending form. Add the class ion-margin-bottom to apply margin styling.

<IonContent className='ion-padding ion-text-center'>
  ...
  <form action="#" className='ion-margin-bottom'>
  </form>
</IonContent>

10. Include items within the form

Within the form, include the IonItem component with the class ion-no-padding.

<form action="#" className='ion-margin-bottom'>
  <IonItem className='ion-no-padding'>
  </IonItem>
</form>

This utilizes IonItem with the ion-no-padding class inside form, allowing you to customize the styling for code input field without additional padding.

11. Place input for verification code

Inside the IonItem component, place the IonInput component for entering the verification code. Add the label 'Verification code,' set the labelPlacement as floating.

<IonItem className='ion-no-padding'>
  <IonInput label='Verification code' labelPlacement='floating'></IonInput>
</IonItem>

12. Implement the logic of resending the code

After the IonItem component, add the IonText component with the color='medium' attribute to define the color of the text inside. Inside the IonText component, include a <p> element with the text 'Didn't get a code?'. Inside the <p> tag, add the IonRouterLink component with the onClick={() => {}} to implement the logic of resending the code.

<form action="#" className='ion-margin-bottom'>
  ...
  <IonText color='medium'>
    <p>
      Didn't get a code?
      <IonRouterLink onClick={() => {}}>
        Click to resend
      </IonRouterLink>
    </p>
  </IonText>
</form>

13. Add the 'Submit' button

Next, include the <br /> tag to create a line break between components, and add the IonButton with the text 'Submit'. Set the className='ion-margin-vertical', expand='block', and type='submit' attributes. After the IonButton, place one more <br /> tag.

<form action="#" className='ion-margin-bottom'>
  ...
  <br />
  <IonButton className='ion-margin-vertical' expand='block' type='submit'>
    Submit
  </IonButton>
</form>

14. Place the link for help

After the form component, place the IonRouterLink with the text 'I need help' inside.

<IonContent className='ion-padding ion-text-center'>
  ...
  <IonRouterLink href='#'>I need help</IonRouterLink>
</IonContent>

Thank you for joining us on this exciting journey thus far. Stay tuned for more guides in our comprehensive series, where we'll not only delve into various aspects of mobile app development but also showcase how the Ionic Kit can be your game-changer.

Are you prepared to elevate your Ionic experience? Explore the advantages of incorporating the Ionic Design Kit for intuitive designs and seamless development. May your coding journey be marked by continual innovation and triumphant achievements!