{"id":16237294,"url":"https://github.com/christopherpickering/remix-saml-authentication","last_synced_at":"2025-03-19T15:31:11.647Z","repository":{"id":103395229,"uuid":"585591243","full_name":"christopherpickering/remix-saml-authentication","owner":"christopherpickering","description":"Example Remix JS project with SAML authentication","archived":false,"fork":false,"pushed_at":"2023-12-15T05:32:55.000Z","size":198,"stargazers_count":13,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-28T19:38:27.224Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/christopherpickering.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"christopherpickering","custom":"https://venmo.com/code?user_id=3118520086822912596\u0026created=1655827155"}},"created_at":"2023-01-05T15:05:20.000Z","updated_at":"2024-03-22T10:35:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"f463fd46-7566-481f-a8e9-6ee5de87dff7","html_url":"https://github.com/christopherpickering/remix-saml-authentication","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christopherpickering%2Fremix-saml-authentication","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christopherpickering%2Fremix-saml-authentication/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christopherpickering%2Fremix-saml-authentication/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christopherpickering%2Fremix-saml-authentication/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/christopherpickering","download_url":"https://codeload.github.com/christopherpickering/remix-saml-authentication/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244003496,"owners_count":20382196,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-10T13:35:11.827Z","updated_at":"2025-03-19T15:31:11.250Z","avatar_url":"https://github.com/christopherpickering.png","language":"TypeScript","funding_links":["https://github.com/sponsors/christopherpickering","https://venmo.com/code?user_id=3118520086822912596\u0026created=1655827155"],"categories":[],"sub_categories":[],"readme":"# Remix with SAML Authentication\n\nThis is an example Remix website using the default `Blues Stack` with enough tweaks to make Single Sign On with SAML2 work nicely.\n\nThis site is using [Samlify](https://samlify.js.org/#/).\n\n(note) I also removed some of the references to fly.\n\n## Basic configuration\n\n### Start a Saml IDP\n\nFor development/demoing you can start up a simple SAML IPD server from https://github.com/mcguinness/saml-idp.\n\n1. clone [the repo](https://github.com/mcguinness/saml-idp) somewhere.\n2. cd to the repo.\n3. generate a cert using their sample code `openssl req -x509 -new -newkey rsa:2048 -nodes -subj '/C=US/ST=California/L=San Francisco/O=JankyCo/CN=Test Identity Provider' -keyout idp-private-key.pem -out idp-public-cert.pem -days 7300 `\n4. Start up the IDP server `node ./bin/run.js --acsUrl http://localhost:3000/auth/asc --audience http://localhost:3000/login`\n\n🎉 Nice!\n\n### Create a .env file\n\nNext, copy the `.env.example` file into `.env`.\n\nUpdate `SAML_PRIVATE_KEY` and `SAML_ENC_PRIVATE_KEY` to wherever you saved your `.pem` generated in the previous step. Easiest to copy the `.pem` into this folder.. but whatever floats your boat.\n\nConsider changing the database url as well.\n\n### Run like Remix!\n\nNext startup the app like remix recommends.\n\n```sh\n npm run setup # create the database\n npm run build # initial build\n npm run dev # run the website!\n```\n\n## Using the site\n\nThe `/` route is not secured with login.\n\nGo to http://localhost:3000/notes to see the SSO process in action. You will be redirected to the IDP for login. Click the login button at the bottom of the screen. You will not be sent back to the `/notes` route.\n\nYou can fine tune user access, etc, or add additional functions to protect routes based on user groups, addresses, etc if you wish.\n\nUsers are automatically added to the database on their first signin attempt.\n\n---\n\nRemix stuff.....\n\n# Remix Blues Stack\n\n![The Remix Blues Stack](https://repository-images.githubusercontent.com/461012689/37d5bd8b-fa9c-4ab0-893c-f0a199d5012d)\n\nLearn more about [Remix Stacks](https://remix.run/stacks).\n\n```\nnpx create-remix@latest --template remix-run/blues-stack\n```\n\n## What's in the stack\n\n- [GitHub Actions](https://github.com/features/actions) for deploy on merge to production and staging environments\n- Email/Password Authentication with [cookie-based sessions](https://remix.run/docs/en/v1/api/remix#createcookiesessionstorage)\n- Database ORM with [Prisma](https://prisma.io)\n- Styling with [Tailwind](https://tailwindcss.com/)\n- End-to-end testing with [Cypress](https://cypress.io)\n- Local third party request mocking with [MSW](https://mswjs.io)\n- Unit testing with [Vitest](https://vitest.dev) and [Testing Library](https://testing-library.com)\n- Code formatting with [Prettier](https://prettier.io)\n- Linting with [ESLint](https://eslint.org)\n- Static Types with [TypeScript](https://typescriptlang.org)\n\nNot a fan of bits of the stack? Fork it, change it, and use `npx create-remix --template your/repo`! Make it your own.\n\n## Development\n\n- This step only applies if you've opted out of having the CLI install dependencies for you:\n\n  ```sh\n  npx remix init\n  ```\n\n- Initial setup:\n\n  ```sh\n  npm run setup\n  ```\n\n- Run the first build:\n\n  ```sh\n  npm run build\n  ```\n\n- Start dev server:\n\n  ```sh\n  npm run dev\n  ```\n\nThis starts your app in development mode, rebuilding assets on file changes.\n\n### Relevant code:\n\nThis is a pretty simple note-taking app, but it's a good example of how you can build a full stack app with Prisma and Remix. The main functionality is creating users, logging in and out, and creating and deleting notes.\n\n- creating users, and logging in and out [./app/models/user.server.ts](./app/models/user.server.ts)\n- user sessions, and verifying them [./app/session.server.ts](./app/session.server.ts)\n- creating, and deleting notes [./app/models/note.server.ts](./app/models/note.server.ts)\n\n## Deployment\n\nThis Remix Stack comes with two GitHub Actions that handle automatically deploying your app to production and staging environments.\n\n- Initialize Git.\n\n  ```sh\n  git init\n  ```\n\n- Create a new [GitHub Repository](https://repo.new), and then add it as the remote for your project. **Do not push your app yet!**\n\n  ```sh\n  git remote add origin \u003cORIGIN_URL\u003e\n  ```\n\n## GitHub Actions\n\nWe use GitHub Actions for continuous integration and deployment. Anything that gets into the `main` branch will be deployed to production after running tests/build/etc. Anything in the `dev` branch will be deployed to staging.\n\n## Testing\n\n### Cypress\n\nWe use Cypress for our End-to-End tests in this project. You'll find those in the `cypress` directory. As you make changes, add to an existing file or create a new file in the `cypress/e2e` directory to test your changes.\n\nWe use [`@testing-library/cypress`](https://testing-library.com/cypress) for selecting elements on the page semantically.\n\nTo run these tests in development, run `npm run test:e2e:dev` which will start the dev server for the app as well as the Cypress client. Make sure the database is running in docker as described above.\n\nWe have a utility for testing authenticated features without having to go through the login flow:\n\n```ts\ncy.login();\n// you are now logged in as a new user\n```\n\nWe also have a utility to auto-delete the user at the end of your test. Just make sure to add this in each test file:\n\n```ts\nafterEach(() =\u003e {\n  cy.cleanupUser();\n});\n```\n\nThat way, we can keep your local db clean and keep your tests isolated from one another.\n\n### Vitest\n\nFor lower level tests of utilities and individual components, we use `vitest`. We have DOM-specific assertion helpers via [`@testing-library/jest-dom`](https://testing-library.com/jest-dom).\n\n### Type Checking\n\nThis project uses TypeScript. It's recommended to get TypeScript set up for your editor to get a really great in-editor experience with type checking and auto-complete. To run type checking across the whole project, run `npm run typecheck`.\n\n### Linting\n\nThis project uses ESLint for linting. That is configured in `.eslintrc.js`.\n\n### Formatting\n\nWe use [Prettier](https://prettier.io/) for auto-formatting in this project. It's recommended to install an editor plugin (like the [VSCode Prettier plugin](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)) to get auto-formatting on save. There's also a `npm run format` script you can run to format all files in the project.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchristopherpickering%2Fremix-saml-authentication","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchristopherpickering%2Fremix-saml-authentication","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchristopherpickering%2Fremix-saml-authentication/lists"}