|
| 1 | +<h1 align="center" style="color: #343a40;margin: 20px 0;"> |
| 2 | + <p align="center">Remix Auth Asgardeo</p> |
| 3 | +</h1> |
| 4 | + |
| 5 | +<div align="center"> |
| 6 | + <a href="https://github.com/asgardeo/remix-auth-asgardeo/actions/workflows/release.yml"><img src="https://github.com/asgardeo/remix-auth-asgardeo/actions/workflows/release.yml/badge.svg" alt="🚀 Release"></a> |
| 7 | + <a href="https://github.com/asgardeo/remix-auth-asgardeo/actions/workflows/builder.yml"><img src="https://github.com/asgardeo/remix-auth-asgardeo/actions/workflows/builder.yml/badge.svg" alt="🧱 Builder"></a> |
| 8 | + |
| 9 | + <a href="https://stackoverflow.com/questions/tagged/wso2is"><img src="https://img.shields.io/badge/Ask%20for%20help%20on-Stackoverflow-orange" alt="Stackoverflow"></a> |
| 10 | + <a href="https://discord.gg/wso2"><img src="https://img.shields.io/badge/Join%20us%20on-Discord-%23e01563.svg" alt="Discord"></a> |
| 11 | + <a href="https://github.com/asgardeo/remix-auth-asgardeo/blob/main/LICENSE"><img src="https://img.shields.io/badge/License-Apache%202.0-blue.svg" alt="License"></a> |
| 12 | + <a href="https://twitter.com/intent/follow?screen_name=wso2"><img src="https://img.shields.io/twitter/follow/wso2.svg?style=social&label=Follow" alt="Twitter"></a> |
| 13 | +</div> |
| 14 | + |
| 15 | +<br> |
| 16 | + |
| 17 | +[Remix Auth](https://remix.run/resources/remix-auth) is a flexible authentication framework for [Remix](https://remix.run/) applications that allows developers to implement various strategies for user authentication. |
| 18 | + |
| 19 | +The Asgardeo strategy is a custom implementation of the [OAuth2Strategy](https://github.com/sergiodxa/remix-auth-oauth2) designed specifically for integrating with [Asgardeo](https://wso2.com/asgardeo), an identity-as-a-service (IDaaS) platform. This strategy enables developers to authenticate users against an Asgardeo organization using OpenID Connect (OIDC). |
| 20 | + |
| 21 | +## Supported runtimes |
| 22 | + |
| 23 | +| Runtime | Has Support | |
| 24 | +| ---------- | ----------- | |
| 25 | +| Node.js | ✅ | |
| 26 | +| Cloudflare | ✅ | |
| 27 | + |
| 28 | +## How to use |
| 29 | + |
| 30 | +### Create an Asgardeo organization |
| 31 | + |
| 32 | +Head over to [Asgardeo](https://wso2.com/asgardeo) and sign up for an organization. |
| 33 | + |
| 34 | +### Register an application |
| 35 | + |
| 36 | +Follow the steps on the [Asgardeo documentation](https://wso2.com/asgardeo/docs/guides/applications/register-oidc-web-app/) to create an application and get the client ID, and client secret. |
| 37 | + |
| 38 | +### Create the Asgardeo strategy instance |
| 39 | + |
| 40 | +```ts |
| 41 | +// app/utils/asgardeo.server.ts |
| 42 | +import { Authenticator } from "remix-auth"; |
| 43 | +import { AsgardeoStrategy } from "remix-auth-asgardeo"; |
| 44 | + |
| 45 | +// Create an instance of the authenticator, pass a generic with what your |
| 46 | +// strategies will return and will be stored in the session |
| 47 | +export const authenticator = new Authenticator<User>(sessionStorage); |
| 48 | + |
| 49 | +let asgardeoStrategy = new AsgardeoStrategy( |
| 50 | + { |
| 51 | + authorizedRedirectUrl: "http://localhost:5173/auth/asgardeo/callback", |
| 52 | + clientID: "YOUR_ASGARDEO_CLIENT_ID", |
| 53 | + clientSecret: "YOUR_ASGARDEO_CLIENT_SECRET", |
| 54 | + baseUrl: "https://api.asgardeo.io/t/<YOUR_ASGARDEO_ORG_NAME>", |
| 55 | + }, |
| 56 | + async ({ accessToken, refreshToken, extraParams, profile }) => { |
| 57 | + // Get the user data from your DB or API using the tokens and profile |
| 58 | + return User.findOrCreate({ email: profile.emails[0].value }); |
| 59 | + } |
| 60 | +); |
| 61 | + |
| 62 | +authenticator.use(asgardeoStrategy); |
| 63 | +``` |
| 64 | + |
| 65 | +### Setup application routes |
| 66 | + |
| 67 | +```ts |
| 68 | +// app/routes/login.tsx |
| 69 | +export default function Login() { |
| 70 | + return ( |
| 71 | + <Form action="/auth/asgardeo" method="post"> |
| 72 | + <button>Login with Asgardeo</button> |
| 73 | + </Form> |
| 74 | + ); |
| 75 | +} |
| 76 | +``` |
| 77 | + |
| 78 | +```ts |
| 79 | +// app/routes/auth.asgardeo.tsx |
| 80 | +import type { ActionFunctionArgs } from "@remix-run/node"; |
| 81 | + |
| 82 | +import { authenticator } from "~/utils/asgardeo.server"; |
| 83 | + |
| 84 | +export let loader = () => redirect("/login"); |
| 85 | + |
| 86 | +export let action = ({ request }: ActionFunctionArgs) => { |
| 87 | + return authenticator.authenticate("asgardeo", request); |
| 88 | +}; |
| 89 | +``` |
| 90 | + |
| 91 | +```ts |
| 92 | +// app/routes/auth.asgardeo.callback.tsx |
| 93 | +import type { LoaderFunctionArgs } from "@remix-run/node"; |
| 94 | + |
| 95 | +import { authenticator } from "~/utils/asgardeo.server"; |
| 96 | + |
| 97 | +export let loader = ({ request }: LoaderFunctionArgs) => { |
| 98 | + return authenticator.authenticate("asgardeo", request, { |
| 99 | + successRedirect: "/dashboard", |
| 100 | + failureRedirect: "/login", |
| 101 | + }); |
| 102 | +}; |
| 103 | +``` |
| 104 | + |
| 105 | +```ts |
| 106 | +// app/routes/auth.logout.ts |
| 107 | +import type { ActionFunctionArgs } from "@remix-run/node"; |
| 108 | + |
| 109 | +import { redirect } from "@remix-run/node"; |
| 110 | + |
| 111 | +import { destroySession, getSession } from "~/utils/asgardeo.server"; |
| 112 | + |
| 113 | +export const action = async ({ request }: ActionFunctionArgs) => { |
| 114 | + const session = await getSession(request.headers.get("Cookie")); |
| 115 | + const logoutURL = new URL(process.env.ASGARDEO_LOGOUT_URL); // i.e https://api.asgardeo.io/t/pavinduorg/oidc/logout |
| 116 | + |
| 117 | + logoutURL.searchParams.set("client_id", process.env.ASGARDEO_CLIENT_ID); |
| 118 | + logoutURL.searchParams.set("returnTo", process.env.ASGARDEO_RETURN_TO_URL); |
| 119 | + |
| 120 | + return redirect(logoutURL.toString(), { |
| 121 | + headers: { |
| 122 | + "Set-Cookie": await destroySession(session), |
| 123 | + }, |
| 124 | + }); |
| 125 | +}; |
| 126 | +``` |
| 127 | + |
| 128 | +## Contribute |
| 129 | +Please read [Contributing Guide](CONTRIBUTING.md) for details on how to contribute to Remix Auth Asgardeo. Refer to [General Contribution Guidelines](http://wso2.github.io/) for details on our code of conduct, and the process for submitting pull requests to us. |
| 130 | + |
| 131 | +### Reporting issues |
| 132 | +We encourage you to report issues, improvements, and feature requests creating [Github Issues](https://github.com/asgardeo/remix-auth-asgardeo/issues). |
| 133 | + |
| 134 | +**Important **: Please be advised that security issues MUST be reported to < a href= "mailto:[email protected]">security@wso2com</ a>, not as GitHub issues, in order to reach the proper audience. We strongly advise following the WSO2 Security Vulnerability Reporting Guidelines when reporting the security issues. |
| 135 | + |
| 136 | +## License |
| 137 | +This project is licensed under the Apache License 2.0. See the [LICENSE](LICENSE) file for details. |
0 commit comments