{"id":13632078,"url":"https://github.com/mishushakov/signin-with-matrix","last_synced_at":"2025-04-13T05:38:56.615Z","repository":{"id":42574879,"uuid":"427371924","full_name":"mishushakov/signin-with-matrix","owner":"mishushakov","description":"Federated sign-in component for your web app (using Matrix)","archived":false,"fork":false,"pushed_at":"2022-08-30T20:45:03.000Z","size":76,"stargazers_count":212,"open_issues_count":8,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-10T18:45:51.465Z","etag":null,"topics":["component","element","matrix","signin","svelte","typescript","vite","webcomponents"],"latest_commit_sha":null,"homepage":"https://mishushakov.github.io/signin-with-matrix","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mishushakov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"custom":"https://paypal.me/ushakovhq"}},"created_at":"2021-11-12T13:35:39.000Z","updated_at":"2025-01-04T20:35:25.000Z","dependencies_parsed_at":"2022-08-26T05:22:09.490Z","dependency_job_id":null,"html_url":"https://github.com/mishushakov/signin-with-matrix","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/mishushakov%2Fsignin-with-matrix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mishushakov%2Fsignin-with-matrix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mishushakov%2Fsignin-with-matrix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mishushakov%2Fsignin-with-matrix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mishushakov","download_url":"https://codeload.github.com/mishushakov/signin-with-matrix/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248670506,"owners_count":21142897,"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":["component","element","matrix","signin","svelte","typescript","vite","webcomponents"],"created_at":"2024-08-01T22:02:50.633Z","updated_at":"2025-04-13T05:38:56.194Z","avatar_url":"https://github.com/mishushakov.png","language":"Svelte","funding_links":["https://paypal.me/ushakovhq"],"categories":["Svelte"],"sub_categories":[],"readme":"# Sign in with Matrix\n\nhttps://user-images.githubusercontent.com/10400064/141484564-efcaa3b9-18cc-4ca5-9270-f4c4eda9073a.mov\n\n[Over 35 million](https://techcrunch.com/2021/07/27/element-a-messaging-app-built-on-the-decentralized-matrix-protocol-raises-30m/) Matrix users can't wait to use your app. Use this pre-built component to make federated sign-in a no-effort zero-brainer\n\nBefore you do, please [try a demo](https://mishushakov.github.io/signin-with-matrix)\n\nLike it? Click on \"Sponsor\", so i can keep making this stuff!\n\n✨ Featured on [This Week in Matrix](https://matrix.org/blog/2021/11/12/this-week-in-matrix-2021-11-12)\n\n## Cool stuff\n\n- Based on svelte, vite and typescript\n- Fully customisable and ready to use (even commercially)\n- Extremely lightweight\n- Framework-agnostic\n- Superior User-Interface and User-Experience\n- Secure, requires no backend to function\n- Fully accessible, compliant with WCAG Accessibility Guidelines\n- Compliant with Matrix 1.0 Protocol spec\n\n## Install\n\n### Browser\n\n**ES Module**\n\n```html\n\u003cscript defer src=\"https://unpkg.com/signin-with-matrix@latest/dist/index.es.js\"\u003e\u003c/script\u003e\n```\n\n**UMD**\n\n```html\n\u003cscript defer src=\"https://unpkg.com/signin-with-matrix@latest/dist/index.umd.js\"\u003e\u003c/script\u003e\n```\n\n### NPM\n\n```sh\nnpm i signin-with-matrix\n```\n\nImport into your application with\n\n```js\nimport signIn from 'signin-with-matrix'\n```\n\n### Use\n\nAdd the two components to your HTML\n\n```html\n\u003cmatrix-signin id=\"signin\"\u003e\u003c/matrix-signin\u003e\n\u003cmatrix-signin-button target=\"signin\"\u003e\n  Sign in with Matrix\n\u003c/matrix-signin-button\u003e\n```\n\n- `\u003cmatrix-signin\u003e` is the modal window\n- `\u003cmatrix-signin-button\u003e` is a button which toggles the modal\n\n## Spec\n\n### `\u003cmatrix-signin\u003e`\n\n#### HTML attributes\n\n- `displayName` (String), name that will be displayed in Matrix\n- `title` (String), modal title\n- `homeserver` (String), default home server\n\n**Example**\n\n```html\n\u003cmatrix-signin\n  displayName=\"My app\"\n  title=\"Use my app with Matrix\"\n  homeserver=\"matrix.org\"\u003e\n\u003c/matrix-signin\u003e\n```\n\n#### Methods\n\n- `open()`, opens the modal\n- `close()`, closes the modal\n- `cancel()`, cancels the modal (will send cancel event)\n- `isSignedIn()`, checks if user is signed in\n- `getUser()`, returns current user, returns Promise\n- `signOut()`, sign out, returns Promise\n\n#### Events\n\n- `open`, when modal opens\n- `cancel`, when modal is cancelled\n- `success`, when login has succeeded (with user object)\n- `error`, when error occurs (with error object)\n- `signout`, when user signs out\n\n**Example**\n\n**Vanilla HTML + JS**\n\n```html\n\u003cmatrix-signin id=\"signin\"\u003e\u003c/matrix-signin\u003e\n\u003cscript\u003e\n  const signIn = document.querySelector('matrix-signin')\n  signIn.addEventListener('success', ({ detail }) =\u003e {\n    console.log(detail.user)\n  })\n\u003c/script\u003e\n```\n\n**Vue**\n\n```vue\n\u003ctemplate\u003e\n  \u003cmatrix-signin @success=\"notify\"\u003e\u003c/matrix-signin\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  methods: {\n    notify (user) {\n      alert(JSON.stringify(user))\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n#### Styling\n\nCSS variables available to style\n\n```css\n--matrix-signin-shim-background\n--matrix-signin-shim-blur\n--matrix-signin-dialog-background\n--matrix-signin-dialog-border-color\n--matrix-signin-dialog-shadow\n--matrix-signin-dialog-text-color\n--matrix-signin-dialog-icon-color\n--matrix-signin-dialog-hover-color\n--matrix-signin-dialog-error-color\n--matrix-signin-dialog-form-background\n--matrix-signin-dialog-button-background\n--matrix-signin-dialog-button-color\n```\n\n### `\u003cmatrix-signin-button\u003e`\n\n#### HTML attributes\n\n- `target` (String), id of the target `\u003cmatrix-signin\u003e` component\n\n**Example**\n\n```html\n\u003cmatrix-signin-button target=\"signin\"\u003e\n  Sign in with Matrix\n\u003c/matrix-signin-button\u003e\n```\n\n## Development\n\n1. Clone the repository\n\n```sh\ngit clone https://github.com/mishushakov/signin-with-matrix.git\n```\n\n2. Install dependencies\n\n```sh\nnpm i\n```\n\n3. Start dev server\n\n```sh\nnpm run dev\n```\n\n4. Build\n\n```\nnpm run build\n```\n\n## Acknowledgements\n\n- macOS Big Sur design\n- [Icons by Feather](https://github.com/feathericons/feather)\n- [focus-trap](https://github.com/focus-trap/focus-trap)\n- [boringavatars](https://boringavatars.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmishushakov%2Fsignin-with-matrix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmishushakov%2Fsignin-with-matrix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmishushakov%2Fsignin-with-matrix/lists"}