Home / Blog / How to create a Sign in Screen

How to create a Sign in 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.

A well-designed Sign in screen sets the tone for a seamless and user-friendly experience, making the first impression a lasting one. It's the user's first glimpse into the app's aesthetics and functionality, influencing their perception and engagement. As a fundamental aspect of the user onboarding process, an effective Sign in screen is pivotal in ensuring user satisfaction and retention.

This Sign in screen guide serves as step-by-step instruction on transforming designs, created with our Ionic Design Kit, into your app using the Ionic Framework. This walkthrough ensures a thorough understanding of the seamless fusion between design elements and code implementation within the realm of Ionic app development.

1. Install Ionic CLI with the command

Creating a project with the Ionic CLI

npm i -g @ionic/cli

2. Create a new project

Run the following command.

ionic start sign-in-form blank --type=react

3. Get inside the project directory

cd sign-in-form

4. Create the page

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

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

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

export default SignIn;

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

5. Add header

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

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

6. 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. Create a line break and add a heading

Inside the IonContent component, add the <br /> tag to create a line break between components and add the IonText component within the IonContent section. Inside the IonText component, include an h1 element with the text Sign in.

<IonContent className='ion-padding ion-text-center'>
  <br />
  <IonText><h1>Sign in</h1></IonText>
</IonContent>

8. Add the login form

Next, within the IonContent section, add a <form> tag to encapsulate the login form.

<IonContent className='ion-padding ion-text-center'>
  <br />
  <IonText><h1>Sign in</h1></IonText>

  <form action="#"></form>
</IonContent>

9. Organize the space for input fields

Within the form, place the IonList component with class ion-margin-bottom to organize the input fields for the login and password.

<form action="#">
  <IonList className='ion-margin-bottom'>
            
   </IonList>
</form>

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

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

This utilizes IonItem with the ion-no-padding class inside IonList, allowing you to customize the styling for login and password input fields without additional padding.

11. Add email input

Inside the IonItem component, place the IonInput component for entering the email.
Add the label E-mail, set the label placement as floating, and specify the input type as email.

<IonItem className='ion-no-padding'>
  <IonInput
    label='E-mail'
    labelPlacement='floating'
    type='email'
  ></IonInput>
</IonItem>

This incorporates an IonInput field for entering the email with a floating label specifying E-mail and a type attribute set to email.

12. Add the password input

Within the IonList component, add another IonItem for the password input. Set the label to Password, define the label placement as floating, and specify the input type as password.

<IonItem className='ion-no-padding'>
  <IonInput
    label='Password'
    labelPlacement='floating'
    type='password'
  ></IonInput>
</IonItem>

13. Add the "Forgot password" button

After the IonList component, place an IonButton with the text Forgot password? and add size='small', fill='clear', and className='ion-margin-bottom' to it.

<form action="#">
  <IonList className='ion-margin-bottom'>
    ...
  </IonList>
  <IonButton size='small' fill='clear' className='ion-margin-bottom'>
    Forgot password?
  </IonButton>
</form>

14. Add the Sign in button

Below, position an IonButton with the text Sign in, setting its type as submit and adding fill='solid', expand='block', and className='ion-margin-bottom.

<IonButton
  fill='solid'
  expand='block'
  type='submit'
  className='ion-margin-bottom'
>
  Sign in
</IonButton>

15. Display and style the text

Next use the IonText component to display the text or in a paragraph format with a medium color.

<form action="#">
  ...
</form>
<IonText color='medium'><p>or</p></IonText>

16. Add Login buttons

Next, add the IonList component to organize the login buttons for Apple and Google.

<IonList className='ion-margin-bottom'></IonList>

17. Import logo icons

Use Ionicons to include logos for Apple and Google on the login buttons. Import the icons using the following.

import { logoApple, logoGoogle } from 'ionicons/icons';

18. Add the Sign in with Apple button

Inside the IonList, place an IonButton for signing in with Apple. Use the following code as a template.

<IonButton fill='outline' expand='block'>
  <IonIcon slot='start' icon={ logoApple }></IonIcon>
  Sign in with Apple
</IonButton>

This IonButton is configured with outline fill, expanding to the full width of its container, and includes the IonIcon for the Apple logo on the left.

19. Add the Sign in with Google button

Similarly, add the IonButton for signing in with Google below.

<IonButton fill='outline' expand='block'>
  <IonIcon slot='start' icon={ logoGoogle }></IonIcon>
  Sign in with Google
</IonButton>

20. Add the text component

After the IonList component, add the <br /> tag to create a line break between components and add the IonText component within the IonContent section. You can use the IonRouterLink component to navigate to another page.

<IonText color='medium'>
  <p>
    Don't have an account yet? 
    <IonRouterLink href='/sign-up'>Sign up</IonRouterLink>
   </p>
</IonText>

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!

Looking for Ionic kit for you platform?
Ionic Sketch
Ionic Figma
Ionic XD