"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "introduction", "hProperties": { "id": "introduction" } }, "depth": 2, "value": "Introduction" }, { "data": { "id": "prerequisites", "hProperties": { "id": "prerequisites" } }, "depth": 2, "value": "Prerequisites" }, { "data": { "id": "create-a-logto-application", "hProperties": { "id": "create-a-logto-application" } }, "depth": 2, "value": "Create a Logto application" }, { "data": { "id": "integrate-with-logto-sdk", "hProperties": { "id": "integrate-with-logto-sdk" } }, "depth": 2, "value": "Integrate with Logto SDK" }, { "data": { "id": "installation", "hProperties": { "id": "installation" } }, "depth": 3, "value": "Installation" }, { "data": { "id": "add-logto-authentication-middleware", "hProperties": { "id": "add-logto-authentication-middleware" } }, "depth": 3, "value": "Add Logto authentication middleware" }, { "data": { "id": "sign-in", "hProperties": { "id": "sign-in" } }, "depth": 3, "value": "Sign-in" }, { "data": { "id": "sign-out", "hProperties": { "id": "sign-out" } }, "depth": 3, "value": "Sign-out" }, { "data": { "id": "implement-sign-insign-out-buttons-razor-pages", "hProperties": { "id": "implement-sign-insign-out-buttons-razor-pages" } }, "depth": 3, "value": "Implement sign-in/sign-out buttons (Razor Pages)" }, { "data": { "id": "checkpoint-run-the-web-application", "hProperties": { "id": "checkpoint-run-the-web-application" } }, "depth": 2, "value": "Checkpoint: Run the web application" }, { "data": { "id": "further-readings", "hProperties": { "id": "further-readings" } }, "depth": 2, "value": "Further readings" }]; const readingTime = { "minutes": 3, "words": 1042, "text": "3 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {LogtoCloudButton, Note} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); if (!Note) _missingMdxReference("Note", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "introduction", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#introduction", children: _jsx(_components.span, { children: "#" }) }), "Introduction"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "https://logto.io/", children: "Logto" }), " is a modern Auth0 alternative for building customer identity infrastructure with minimal effort. It supports various sign-in methods, including username, email, phone number, and popular social sign-ins like Google and GitHub."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "https://docs.microsoft.com/en-us/aspnet/core/", children: "ASP.NET Core" }), " is a cross-platform, high-performance, open-source framework for building modern, cloud-based, Internet-connected applications."] }), "\n"] }), "\n", _jsx(_components.p, { children: "In this tutorial, we will show you how to build a user authentication flow with ASP.NET Core by integrating Logto SDK. The tutorial uses C# as the programming language." }), "\n", _jsxs(_components.h2, { id: "prerequisites", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#prerequisites", children: _jsx(_components.span, { children: "#" }) }), "Prerequisites"] }), "\n", _jsx(_components.p, { children: "Before you begin, ensure you have the following:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["A Logto account. If you don't have one, you can ", _jsx(_components.a, { href: "https://cloud.logto.io/", children: "sign up for free" }), "."] }), "\n", _jsxs(_components.li, { children: ["A .NET development environment and an ASP.NET Core project. If you don't have one, you can ", _jsx(_components.a, { href: "https://dotnet.microsoft.com/download", children: "install .NET" }), " and follow the ", _jsx(_components.a, { href: "https://dotnet.microsoft.com/en-us/apps/aspnet", children: "ASP.NET tutorials" }), " to set up your project."] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "create-a-logto-application", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#create-a-logto-application", children: _jsx(_components.span, { children: "#" }) }), "Create a Logto application"] }), "\n", _jsx(_components.p, { children: "To get started, create a Logto application with the \"Traditional web\" type. Follow these steps to create a Logto application:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["Sign in to the ", _jsx(_components.a, { href: "https://cloud.logto.io/", children: "Logto Console" }), "."] }), "\n", _jsxs(_components.li, { children: ["In the left navigation bar, click on ", _jsx(_components.strong, { children: "Applications" }), "."] }), "\n", _jsxs(_components.li, { children: ["Click on ", _jsx(_components.strong, { children: "Create application" }), "."] }), "\n", _jsx(_components.li, { children: "In the opened page, find the \"Traditional web app\" section and locate the \"ASP.NET Core\" card." }), "\n", _jsxs(_components.li, { children: ["Click on ", _jsx(_components.strong, { children: "Start building" }), ", and input the name of your application."] }), "\n", _jsxs(_components.li, { children: ["Click on ", _jsx(_components.strong, { children: "Create" }), "."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Then you should see an interactive tutorial that guides you through the process of integrating Logto SDK with your ASP.NET Core application. The following content can be a reference for future use." }), "\n", _jsx(LogtoCloudButton, { children: "Try Logto Cloud's interactive tutorial" }), "\n", _jsxs(_components.h2, { id: "integrate-with-logto-sdk", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#integrate-with-logto-sdk", children: _jsx(_components.span, { children: "#" }) }), "Integrate with Logto SDK"] }), "\n", _jsxs(_components.h3, { id: "installation", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#installation", children: _jsx(_components.span, { children: "#" }) }), "Installation"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "dotnet add package Logto.AspNetCore.Authentication\n" }) }), "\n", _jsxs(_components.p, { children: ["Note the minimum supported version of ASP.NET Core is ", _jsx(_components.code, { children: "6.0" }), "."] }), "\n", _jsxs(_components.h3, { id: "add-logto-authentication-middleware", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#add-logto-authentication-middleware", children: _jsx(_components.span, { children: "#" }) }), "Add Logto authentication middleware"] }), "\n", _jsxs(_components.p, { children: ["Open ", _jsx(_components.code, { children: "Startup.cs" }), " (or ", _jsx(_components.code, { children: "Program.cs" }), ") and add the following code to register Logto authentication middleware:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-csharp", children: "using Logto.AspNetCore.Authentication;\n\nvar builder = WebApplication.CreateBuilder(args);\n\nbuilder.Services.AddLogtoAuthentication(options =>\n{\n options.Endpoint = builder.Configuration[\"Logto:Endpoint\"]!;\n options.AppId = builder.Configuration[\"Logto:AppId\"]!;\n options.AppSecret = builder.Configuration[\"Logto:AppSecret\"];\n});\n\napp.UseAuthentication();\n" }) }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "AddLogtoAuthentication" }), " method will do the following things:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Set the default authentication scheme to ", _jsx(_components.code, { children: "LogtoDefaults.CookieScheme" }), "."] }), "\n", _jsxs(_components.li, { children: ["Set the default challenge scheme to ", _jsx(_components.code, { children: "LogtoDefaults.AuthenticationScheme" }), "."] }), "\n", _jsxs(_components.li, { children: ["Set the default sign-out scheme to ", _jsx(_components.code, { children: "LogtoDefaults.AuthenticationScheme" }), "."] }), "\n", _jsx(_components.li, { children: "Add cookie and OpenID Connect authentication handlers to the authentication scheme." }), "\n"] }), "\n", _jsxs(_components.h3, { id: "sign-in", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sign-in", children: _jsx(_components.span, { children: "#" }) }), "Sign-in"] }), "\n", _jsxs(_components.p, { children: ["Add the following URI to the ", _jsx(_components.code, { children: "Redirect URIs" }), " list in the Logto application details page:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "http:///Callback\n" }) }), "\n", _jsxs(_components.p, { children: ["To sign-in with Logto, you can use the ", _jsx(_components.code, { children: "ChallengeAsync" }), " method:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-csharp", children: "await HttpContext.ChallengeAsync(new AuthenticationProperties\n{\n RedirectUri = \"/\"\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "ChallengeAsync" }), " method will redirect the user to the Logto sign-in page."] }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "RedirectUri" }), " property is used to redirect the user back to your web application after authentication. Note it is different from the redirect URI you configured in the Logto application details page:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "The redirect URI in the Logto application details page is the URI that Logto will redirect the user back to after the user has signed in." }), "\n", _jsxs(_components.li, { children: ["The ", _jsx(_components.code, { children: "RedirectUri" }), " property is the URI that will be redirected to after necessary actions have been taken in the Logto authentication middleware."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["The order of the actions is 1 -> 2. For clarity, let's call the redirect URI in the Logto application details page the ", _jsx(_components.strong, { children: "Logto redirect URI" }), " and the ", _jsx(_components.code, { children: "RedirectUri" }), " property the ", _jsx(_components.strong, { children: "application redirect URI" }), "."] }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.strong, { children: "Logto redirect URI" }), " has a default value of ", _jsx(_components.code, { children: "/Callback" }), ", which you can leave it as is if there's no special requirement. If you want to change it, you can set the ", _jsx(_components.code, { children: "CallbackPath" }), " property for ", _jsx(_components.code, { children: "LogtoOptions" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-csharp", children: "builder.Services.AddLogtoAuthentication(options =>\n{\n options.CallbackPath = \"/SomeOtherCallbackPath\";\n});\n" }) }), "\n", _jsx(_components.p, { children: "Remember to update the value in the Logto application details page accordingly." }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["No need to set the ", _jsx(_components.strong, { children: "application redirect URI" }), " in the Logto application details page."] }) }), "\n", _jsxs(_components.h3, { id: "sign-out", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sign-out", children: _jsx(_components.span, { children: "#" }) }), "Sign-out"] }), "\n", _jsxs(_components.p, { children: ["Add the following URI to the ", _jsx(_components.code, { children: "Post sign-out redirect URIs" }), " list in the Logto application details page:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "http:///SignedOutCallback\n" }) }), "\n", _jsxs(_components.p, { children: ["To sign-out with Logto, you can use the ", _jsx(_components.code, { children: "SignOutAsync" }), " method:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-csharp", children: "await HttpContext.SignOutAsync(new AuthenticationProperties\n{\n RedirectUri = \"/\"\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "SignOutAsync" }), " method will clear the authentication cookie and redirect the user to the Logto sign-out page."] }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "RedirectUri" }), " property is used to redirect the user back to your web application after sign-out. Note it is different from the post sign-out redirect URI you configured in the Logto application details page:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "The post sign-out redirect URI in the Logto application details page is the URI that Logto will redirect the user back to after the user has signed out." }), "\n", _jsxs(_components.li, { children: ["The ", _jsx(_components.code, { children: "RedirectUri" }), " property is the URI that will be redirected to after necessary actions have been taken in the Logto authentication middleware."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["The order of the actions is 1 -> 2. For clarity, let's call the post sign-out redirect URI in the Logto application details page the ", _jsx(_components.strong, { children: "Logto post sign-out redirect URI" }), " and the ", _jsx(_components.code, { children: "RedirectUri" }), " property the ", _jsx(_components.strong, { children: "application post sign-out redirect URI" }), "."] }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.strong, { children: "Logto post sign-out redirect URI" }), " has a default value of ", _jsx(_components.code, { children: "/SignedOutCallback" }), ", which you can leave it as is if there's no special requirement. If you want to change it, you can set the ", _jsx(_components.code, { children: "SignedOutCallbackPath" }), " property for ", _jsx(_components.code, { children: "LogtoOptions" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-csharp", children: "builder.Services.AddLogtoAuthentication(options =>\n{\n options.SignedOutCallbackPath = \"/SomeOtherSignedOutCallbackPath\";\n});\n" }) }), "\n", _jsx(_components.p, { children: "Remember to update the value in the Logto application details page accordingly." }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["No need to set the ", _jsx(_components.strong, { children: "application post sign-out redirect URI" }), " in the Logto application details page."] }) }), "\n", _jsxs(_components.h3, { id: "implement-sign-insign-out-buttons-razor-pages", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#implement-sign-insign-out-buttons-razor-pages", children: _jsx(_components.span, { children: "#" }) }), "Implement sign-in/sign-out buttons (Razor Pages)"] }), "\n", _jsxs(_components.p, { children: ["First, add the handler methods to your ", _jsx(_components.code, { children: "PageModel" }), ", for example:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-csharp", children: "public class IndexModel : PageModel\n{\n public async Task OnPostSignInAsync()\n {\n await HttpContext.ChallengeAsync(new AuthenticationProperties\n {\n RedirectUri = \"/\"\n });\n }\n\n public async Task OnPostSignOutAsync()\n {\n await HttpContext.SignOutAsync(new AuthenticationProperties\n {\n RedirectUri = \"/\"\n });\n }\n}\n" }) }), "\n", _jsx(_components.p, { children: "Then, add the buttons to your Razor page (html):" }), "\n", _jsx("pre", { class: "language-html", children: _jsx("code", { children: `

Is authenticated: @User.Identity?.IsAuthenticated

` }) }), "\n", _jsx(_components.p, { children: "It will show the \"Sign in\" button if the user is not authenticated, and show the \"Sign out\" button if the user is authenticated." }), "\n", _jsxs(_components.h2, { id: "checkpoint-run-the-web-application", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#checkpoint-run-the-web-application", children: _jsx(_components.span, { children: "#" }) }), "Checkpoint: Run the web application"] }), "\n", _jsx(_components.p, { children: "Now you can run the web application and try to sign-in/sign-out with Logto:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Open the web application in your browser, you should see \"Is authenticated: False\" and the \"Sign in\" button." }), "\n", _jsx(_components.li, { children: "Click the \"Sign in\" button, and you should be redirected to the Logto sign-in page." }), "\n", _jsx(_components.li, { children: "After you have signed in, you should be redirected back to the web application, and you should see \"Is authenticated: True\" and the \"Sign out\" button." }), "\n", _jsx(_components.li, { children: "Click the \"Sign out\" button, and you should be redirected to the Logto sign-out page, and then redirected back to the web application." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["If you encounter any issues during the integration, please don't hesitate to contact us via email at ", _jsx(_components.a, { href: "mailto:contact@logto.io", children: "contact@logto.io" }), " or ", _jsx(_components.a, { href: "https://discord.gg/UEPaF3j5e6", children: "join our Discord server" }), "!"] }), "\n", _jsxs(_components.h2, { id: "further-readings", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#further-readings", children: _jsx(_components.span, { children: "#" }) }), "Further readings"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/customize-sie/", children: "Customize sign-in experience" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/configure-connectors/", children: "Configure connectors" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/protect-your-api/", children: "Protect your API" }) }), "\n"] }), "\n", _jsx(LogtoCloudButton, { children: "Try Logto Today" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }