Language selection

Search


Authentication patterns

This component support the following 3 design pattern variant:

Contextual Sign in button

With proper parameters, the button will appear on page load and will be located on the top right-hand side of the page, below the horizontal line as indicated in the contextual Sign in button guidance.

HTML Structure - Version 1.0

Code sample of the include showing the HTML of the component

Configuration for GCWeb Jekyll

The auth variable MUST be set along with the type parameter with the value "contextual" in order to initiate the contextual sign-in button pattern.

Parameters to be set:

Signed-off / Signed-on

On page load, the buttons must appear on the top right-hand side of the page, below the horizontal line.

HTML Structure - Version 2.0

Code sample of the include showing the HTML of the component

Configuration for GCWeb Jekyll

The auth variable MUST be set along with the type parameter set with either the value "signedoff" or "signedon" in order to initiate the Signed-off or Signed-on pattern.

Parameters to be set:

Previous design patterns

Previous pattern (Authentication Signed off)

The "Register" and "Sign in" buttons were located on the right-hand side of the page, at the end of the <header> section so appearing between the breadcrumb and the <h1> element.

Government of Canada, Gouvernement du Canada, Français, Search Canada.ca, Menu, Canada.ca, Register, Sign in, Content page - Signed Off, Heading 2 (h2)

Code

<section id="wb-so">
	<h2 class="wb-inv">Sign-on information</h2>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<button class="btn btn-default" type="button">Register</button>
				<button class="btn btn-primary" type="button">Sign in</button>
			</div>
		</div>
	</div>
</section>
Previous pattern (Authentication Signed on)

The "My account" and "Sign out" buttons along with the wording "Signed in as [full name]" right underneath were located on the right-hand side of the page, at the end of the <header> section so appearing between the breadcrumb and the <h1> element.

Government of Canada, Gouvernement du Canada, Français, Search Canada.ca, Menu, Canada.ca, Signed in as John Doe, My account, Sign out, Content page - Signed On, Heading 2 (h2)

Code

<section id="wb-so">
	<h2 class="wb-inv">Sign-on information</h2>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<p><span class="mrgn-rght-md">Signed in as <span>John Doe</span></span></p>
				<button class="btn btn-default" type="button">My account</button>
				<button class="btn btn-primary" type="button">Sign out</button>
			</div>
		</div>
	</div>
</section>

HTML Structure - Version 2.0

Code sample of the include showing the HTML of the component

CSS Class

Specific classes have been added to the unique component id #wb-so.