{"componentChunkName":"component---src-pages-experimental-login-pattern-index-mdx","path":"/experimental/login-pattern/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Login pattern","description":"The login pattern lets the user authenticate with a system for authorized access to product functionality."},"relativePagePath":"/experimental/login-pattern/index.mdx","titleType":"prepend","MdxNode":{"id":"0ec729af-34fb-51bb-a5d5-1873e4ad44ec","children":[],"parent":"9d348d41-8320-541d-a70b-84c47b94b18a","internal":{"content":"---\ntitle: Login pattern\ndescription: The login pattern lets the user authenticate with a system for authorized access to product functionality.\n---\n\n\n\nThe login pattern lets the user authenticate with a system for authorized access to product functionality.\n\n\n\n#### Status:\n\n[Experimental](/experimental/overview)\n\n#### Maintainer:\n\n[Chris Reckling](https://github.com/creckling)\n\n## Overview\n\nLogin patterns ensure a user can authenticate into a system so they can access their data securely. Mobile login screens should follow the same pattern and illustration style as the desktop experience.\n\nThe \"Forgot Password\" pattern is separate from the authentication and login pattern. If there are several products requiring a login, a user should be able to choose which product to log into.\n\n## Login form variations\n\n### Centered login form\n\nThe centered login includes copyright information in the footer. Refer to your product content team for these details.\n\n\n\nWireframe of a centered login form\n\n\n\nExample of a centered login form\n\nIf you choose to include an illustration, ensure the art reflects the product. Keep it simple and aligned with the product's aesthetic.\n\n\n\nExample of a centered login form with illustration\n\n### Login form on the right\n\nRight-side logins are ideal for editorial experiences and instances where there is visual content featured on the left side of the window.\n\n\n\nWireframe of right-sided login form\n\n\n\nExample of right-sided login form\n\n### Login page with product selector\n\nIn some cases, you may ask the user to select which product to log into. This allows the user to jump directly to the home landing page for the product after authenticating.\n\nUse a dropdown component to display the options.\n\n\n\nWireframe of login page with product selector\n\n\n\nExample of login page with product selector\n","type":"Mdx","contentDigest":"400e640be87868d11badb95d6ed62f46","counter":1443,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Login pattern","description":"The login pattern lets the user authenticate with a system for authorized access to product functionality."},"exports":{},"rawBody":"---\ntitle: Login pattern\ndescription: The login pattern lets the user authenticate with a system for authorized access to product functionality.\n---\n\n\n\nThe login pattern lets the user authenticate with a system for authorized access to product functionality.\n\n\n\n#### Status:\n\n[Experimental](/experimental/overview)\n\n#### Maintainer:\n\n[Chris Reckling](https://github.com/creckling)\n\n## Overview\n\nLogin patterns ensure a user can authenticate into a system so they can access their data securely. Mobile login screens should follow the same pattern and illustration style as the desktop experience.\n\nThe \"Forgot Password\" pattern is separate from the authentication and login pattern. If there are several products requiring a login, a user should be able to choose which product to log into.\n\n## Login form variations\n\n### Centered login form\n\nThe centered login includes copyright information in the footer. Refer to your product content team for these details.\n\n\n\nWireframe of a centered login form\n\n\n\nExample of a centered login form\n\nIf you choose to include an illustration, ensure the art reflects the product. Keep it simple and aligned with the product's aesthetic.\n\n\n\nExample of a centered login form with illustration\n\n### Login form on the right\n\nRight-side logins are ideal for editorial experiences and instances where there is visual content featured on the left side of the window.\n\n\n\nWireframe of right-sided login form\n\n\n\nExample of right-sided login form\n\n### Login page with product selector\n\nIn some cases, you may ask the user to select which product to log into. This allows the user to jump directly to the home landing page for the product after authenticating.\n\nUse a dropdown component to display the options.\n\n\n\nWireframe of login page with product selector\n\n\n\nExample of login page with product selector\n","fileAbsolutePath":"/zeit/3eb073a4/src/pages/experimental/login-pattern/index.mdx"}}}}