Let's take a closer look at the redirect URI as it is a critical security component in OIDC authentication process.
A Redirect URI, also known as a Reply URL, is a critical security component in OIDC authentication process. It specifies the URL where users are sent after successfully signing in through an OIDC provider. More importantly, it's where your application receives the authorization code needed to obtain tokens.
Check out the Redirect URI wiki for more details.
The Authorization Code Flow (defined in OAuth 2.0 RFC 6749, section 4.1) is a fundamental authentication method in OIDC. It involves exchanging an authorization code for an access token and, optionally, a refresh token. This flow is suitable for applications that can securely maintain a client secret, such as server-side web applications.
Check out the Authorization Code Flow wiki for more details.
In the Authorization Code Flow, the Redirect URI is the destination to which the OIDC provider sends the authorization code after the user successfully authenticates. It must be pre-registered with the OIDC provider to ensure security and prevent unauthorized redirections.
Here's how you can register a Redirect URI in Logto Console:
When initiating a sign-in:
client_id, response_type, scope and the redirect_uri.redirect_uri, including an authorization code as a query parameter.The OIDC provider validates the redirect_uri against the list of pre-registered URIs. If there's a mismatch, an invalid_redirect_uri error will be returned, enhancing security by preventing unauthorized endpoints from receiving tokens.
In real life use cases, a common best practice is to declare a dedicated "Callback" page and associate a router / deep link that allows direct access from external. This link should be used as the redirect URI.
Assuming you have a single-page web app that is running on https://my-app.com, then usually the redirect URI would be declared as https://my-app.com/callback
Or if it is an native mobile app, then the redirect URI usually starts with a custom scheme, e.g. com.company://myapp/callback
Other best practices include:
To handle the authorization code returned to your redirect_uri, follow these steps:
Extract the authorization code: Retrieve the code parameter from the query string of the redirect URI.
Exchange the authorization code for tokens: Compose a POST request to the OIDC provider's token endpoint, including:
client_id: The ID of your application in the OIDC providercode: The authorization code received from the redirect URIcode_verifier: A random string generated on the clientredirect_uri: The same URI used in the authorization requestgrant_type: The type of grant, usually authorization_codeLogto SDKs are the development kit written in a specific programming language or framework, e.g. Logto React SDK, Next.js SDK and Swift SDK. Using an SDK can greatly simplify things up by just calling one or two functions.
Here's a React "Callback" component sample using the Logto official React SDK:
SDK integration guides can be found on the Logto quick-starts docs.
Understanding Redirect URIs in OIDC with the authorization code flow is crucial for securing and optimizing your authentication processes. By registering trusted redirect URIs and handling sign-in callbacks efficiently, you can ensure a seamless and secure experience for your users while simplifying your development efforts with Logto SDKs.