diff --git a/examples/official-site/sqlpage/migrations/68_login.sql b/examples/official-site/sqlpage/migrations/68_login.sql
new file mode 100644
index 00000000..6d906ae5
--- /dev/null
+++ b/examples/official-site/sqlpage/migrations/68_login.sql
@@ -0,0 +1,64 @@
+INSERT INTO component(name, icon, description, introduced_in_version) VALUES
+    ('login', 'password-user', '
+The login component is an authentication form with numerous customization options. 
+It offers the main functionalities for this type of form. 
+The user can enter their username and password. 
+There are many optional attributes such as the use of icons on input fields, the insertion of a link to a page to reset the password, an option for the application to maintain the user''s identity via a cookie. 
+It is also possible to set the title of the form, display the company logo, or customize the appearance of the form submission button.
+
+This component should be used in conjunction with other components such as [authentication](component.sql?component=authentication) and [cookie](component.sql?component=cookie). 
+It does not implement any logic and simply collects the username and password to pass them to the code responsible for authentication.
+
+A few things to know :
+- The form uses the POST method to transmit information to the destination page,
+- The user''s username and password are entered into fields with the names `username` and `password`, 
+- To obtain the values of username and password, you must use the variables `:username` and `:password`,
+- To know if the user wants their identity to be remembered, you must read the value of the variable `:remember`.
+', '0.39.0');
+
+INSERT INTO parameter(component, name, description, type, top_level, optional) SELECT 'login', * FROM (VALUES
+    ('title','Title of the authentication form.','TEXT',TRUE,TRUE),
+    ('enctype','Form data encoding.','TEXT',TRUE,TRUE),
+    ('action','An optional link to a target page that will handle the results of the form. ','TEXT',TRUE,TRUE),
+    ('username','User account identifier.','TEXT',TRUE,FALSE),
+    ('password','User password.','TEXT',TRUE,FALSE),
+    ('username_icon','Icon to display on the left side of the input field, on the same line.','ICON',TRUE,TRUE),
+    ('password_icon','Icon to display on the left side of the input field, on the same line.','ICON',TRUE,TRUE),
+    ('image','The URL of an centered image displayed before the title.','URL',TRUE,TRUE),
+    ('forgot_password_text','A text for the link allowing the user to reset their password. If the text is empty, the link is not displayed.','TEXT',TRUE,TRUE),
+    ('forgot_password_link','The link to the page allowing the user to reset their password.','TEXT',TRUE,TRUE),
+    ('remember_me_text','A text for the option allowing the user to request the preservation of their identity. If the text is empty, the option is not displayed.','TEXT',TRUE,TRUE),
+    ('footer','A text placed at the bottom of the authentication form.','TEXT',TRUE,TRUE),
+    ('footer_md','A markdown text placed at the bottom of the authentication form. Useful for creating links to other pages (creating a new account, contacting technical support, etc.).','TEXT',TRUE,TRUE),
+    ('validate','The text to display in the button at the bottom of the form that submits the values.','TEXT',TRUE,FALSE),
+    ('validate_color','The color of the button at the bottom of the form that submits the values. Omit this property to use the default color.','COLOR',TRUE,TRUE),
+    ('validate_shape','The shape of the validation button.','TEXT',TRUE,TRUE),
+    ('validate_outline','A color to outline the validation button.','COLOR',TRUE,TRUE),
+    ('validate_size','The size of the validation button.','TEXT',TRUE,TRUE)
+) x;
+
+-- Insert example(s) for the component
+INSERT INTO example(component, description, properties)
+VALUES (
+        'login',
+        'Using the main options of the login component',
+        JSON(
+            '[
+                {
+                    "component": "login",
+                    "action": "login.sql",
+                    "image": "../assets/icon.webp",
+                    "title": "Please login to your account",
+                    "username": "Username",
+                    "password": "Password",
+                    "username_icon": "user",
+                    "password_icon": "lock",
+                    "forgot_password_text": "Forgot your password?",
+                    "forgot_password_link": "reset_password.sql",
+                    "remember_me_text": "Remember me",
+                    "footer_md": "Don''t have an account? [Register here](register.sql)",
+                    "validate": "Sign in"
+                }
+            ]'
+        )
+    );
diff --git a/examples/official-site/sqlpage/migrations/99_shared_id_class_attributes.sql b/examples/official-site/sqlpage/migrations/99_shared_id_class_attributes.sql
index 47e66576..df054541 100644
--- a/examples/official-site/sqlpage/migrations/99_shared_id_class_attributes.sql
+++ b/examples/official-site/sqlpage/migrations/99_shared_id_class_attributes.sql
@@ -18,7 +18,8 @@ FROM (VALUES
     ('title', TRUE),
     ('tracking', TRUE),
     ('text', TRUE),
-    ('carousel', TRUE)
+    ('carousel', TRUE),
+    ('login', TRUE)
 );
 
 INSERT INTO parameter(component, top_level, name, description, type, optional) 
@@ -49,6 +50,7 @@ FROM (VALUES
     ('timeline', FALSE),
     ('title', TRUE),
     ('tracking', TRUE),
-    ('carousel', TRUE)
+    ('carousel', TRUE),
+    ('login', TRUE)
 );
 
diff --git a/sqlpage/templates/login.handlebars b/sqlpage/templates/login.handlebars
new file mode 100644
index 00000000..a664e0cc
--- /dev/null
+++ b/sqlpage/templates/login.handlebars
@@ -0,0 +1,75 @@
+<div class="container" {{class}}>
+    <div class="row d-flex justify-content-center">
+        <div class="col-md-6">
+            <form 
+                {{#if id}}id="{{id}}"{{/if}}
+                class="mt-3 mb-1" 
+                method="post" 
+                {{#if enctype}}enctype="{{enctype}}"{{/if}}
+                {{#if action}}
+                    action="https://github.com/%7B%7Baction%7D%7D"
+                {{else}}
+                    {{#if id}}action="#{{id}}"{{/if}}
+                {{/if}}
+            >
+                {{#if image}}
+                    <div class="form-group d-flex justify-content-center align-items-center">
+                        <img src="https://github.com/%7B%7Bimage%7D%7D"/>
+                    </div>
+                {{/if}}
+                {{#if title}}
+                    <h1 class="text-center mb-3">{{title}}</h1>
+                {{/if}}
+                <label class="form-label">{{username}}</label>    
+                <div class="input-icon mb-3">
+                    {{#if username_icon}}
+                        <span class="input-icon-addon">{{icon_img username_icon}}</span>
+                    {{/if}}
+                    <input type="text" name="username" id="username" value="" class="form-control" placeholder="{{username}}" required="required" autofocus/>
+                </div>
+                <label class="form-label">{{password}}
+                    {{#if forgot_password_text}}
+                        <span class="form-label-description"><a href="https://github.com/%7B%7Bforgot_password_link%7D%7D">{{forgot_password_text}}</a></span> 
+                    {{/if}}
+                </label>
+                <div class="input-icon mb-3">
+                    {{#if password_icon}}
+                        <span class="input-icon-addon">{{~icon_img password_icon~}}</span>
+                    {{/if}}
+                    <input type="password" name="password" id="password" value="" class="form-control" placeholder="{{password}}" required="required"/>
+                </div>
+                {{#if remember_me_text}}
+                    <label class="form-check">
+                        <input class="form-check-input" id="remember" name="remember" type="checkbox" />
+                        <span class="form-check-label">{{remember_me_text}}</span>
+                    </label>   
+                {{/if}}
+                <div class="form-group d-flex justify-content-center align-items-center">
+                    <input 
+                        class="btn
+                        btn-{{default validate_color "primary"}}
+                        {{#if validate_shape}} btn-{{validate_shape}} {{/if}}
+                        {{#if validate_outline}} btn-outline-{{validate_outline}} {{/if}}
+                        {{#if validate_size}} btn-{{validate_size}} {{/if}}"
+                        type="submit" 
+                        name="submit"
+                        value="{{validate}}"/>
+                </div>
+                {{#if (or footer footer_md)}}
+                    <hr>
+                    <div class="text-center mb-0">
+                        <small class="form-hint mt-0">
+                            {{#if footer}} 
+                                {{footer}}
+                            {{else}}
+                                {{#if footer_md}}
+                                    {{{markdown footer_md}}}
+                                {{/if}}
+                            {{/if}}
+                        </small>
+                    </div>
+                {{/if}}
+            </form>
+        </div>
+    </div>
+</div>