https://github.com/mishushakov/signin-with-matrix

Skip to content
 
Sign up

  * Why GitHub?
      + Features -
      + Mobile -
      + Actions -
      + Codespaces -
      + Packages -
      + Security -
      + Code review -
      + Issues -
      + Integrations -
      + GitHub Sponsors -
      + Customer stories -
  * Team
  * Enterprise
  * Explore
      + Explore GitHub -
      + Learn and contribute
      + Topics -
      + Collections -
      + Trending -
      + Learning Lab -
      + Open source guides -
      + Connect with others
      + The ReadME Project -
      + Events -
      + Community forum -
      + GitHub Education -
      + GitHub Stars program -
  * Marketplace
  * Pricing
      + Plans -
      + Compare plans -
      + Contact Sales -
      + Education -

[                    ] 

  *  
    #
    In this repository All GitHub |
    Jump to |

  * No suggested jump to results

  *  
    #
    In this repository All GitHub |
    Jump to |
  *  
    #
    In this user All GitHub |
    Jump to |
  *  
    #
    In this repository All GitHub |
    Jump to |

Sign in
Sign up
{{ message }}

mishushakov / signin-with-matrix Public

  * 
  * Notifications
  * Star 133
  * Fork 0
  * 

Federated sign-in component for your web app (using Matrix)

mishushakov.github.io/signin-with-matrix
MIT License
133 stars 0 forks
Star
Notifications

  * Code
  * Issues 5
  * Pull requests 0
  * Actions
  * Security
  * Insights

More

  * Code
  * Issues
  * Pull requests
  * Actions
  * Security
  * Insights

master
Switch branches/tags
[                    ]
Branches Tags
Could not load branches
Nothing to show
Loading
{{ refName }} default View all branches
Could not load tags
Nothing to show
{{ refName }} default
Loading
View all tags
1 branch 0 tags
Code
Loading

Latest commit

@mishushakov
mishushakov Fixes demo, adds another css variable
...
8e1136c Nov 15, 2021
Fixes demo, adds another css variable
8e1136c

Git stats

  * 8 commits

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
.github
Push update
Nov 12, 2021
src
Fixes demo, adds another css variable
Nov 15, 2021
.gitignore
Initial commit
Nov 12, 2021
.npmignore
Push update
Nov 12, 2021
LICENSE
Initial commit
Nov 12, 2021
README.md
Fixes demo, adds another css variable
Nov 15, 2021
index.html
Fixes demo, adds another css variable
Nov 15, 2021
package-lock.json
Initial commit
Nov 12, 2021
package.json
Added css theming
Nov 15, 2021
svelte.config.js
Initial commit
Nov 12, 2021
tsconfig.json
Initial commit
Nov 12, 2021
vite.config.js
Initial commit
Nov 12, 2021
vite.lib.config.js
Push update
Nov 12, 2021
View code
[                    ]
Sign in with Matrix Cool stuff Install Browser NPM Use Spec
<matrix-signin> HTML attributes Methods Events Styling
<matrix-signin-button> HTML attributes Development Acknowledgements

README.md

 Sign in with Matrix

Screen.Recording.2021-11-12.at.05.51.57.mov

Over 35 million Matrix users can't wait to use your app. Use this
pre-built component to make federated sign-in a no-effort
zero-brainer

Before you do, please try a demo

Like it? Click on "Sponsor", so i can keep making this stuff!

 Featured on This Week in Matrix

 Cool stuff

  * Based on svelte, vite and typescript
  * Fully customisable and ready to use (even commercially)
  * Extremely lightweight
  * Framework-agnostic
  * Superior User-Interface and User-Experience
  * Secure, requires no backend to function
  * Fully accessible, compliant with WCAG Accessibility Guidelines
  * Compliant with Matrix 1.0 Protocol spec

 Install

 Browser

ES Module

<script defer src="https://unpkg.com/signin-with-matrix@latest/dist/index.es.js"></script>

UMD

<script defer src="https://unpkg.com/signin-with-matrix@latest/dist/index.umd.js"></script>

 NPM

npm i signin-with-matrix

Import into your application with

import signIn from 'signin-with-matrix'

 Use

Add the two components to your HTML

<matrix-signin id="signin"></matrix-signin>
<matrix-signin-button target="signin">
  Sign in with Matrix
</matrix-signin-button>

  * <matrix-signin> is the modal window
  * <matrix-signin-button> is a button which toggles the modal

 Spec

 <matrix-signin>

 HTML attributes

  * displayName (String), name that will be displayed in Matrix
  * title (String), modal title
  * homeserver (String), default home server

Example

<matrix-signin
  displayName="My app"
  title="Use my app with Matrix"
  homeserver="matrix.org">
</matrix-signin>

 Methods

  * open(), opens the modal
  * close(), closes the modal
  * cancel(), cancels the modal (will send cancel event)
  * isSignedIn(), checks if user is signed in
  * getUser(), returns current user, returns Promise
  * signOut(), sign out, returns Promise

 Events

  * open, when modal opens
  * cancel, when modal is cancelled
  * success, when login has succeeded (with user object)
  * error, when error occurs (with error object)
  * signout, when user signs out

Example

Vanilla HTML + JS

<matrix-signin id="signin"></matrix-signin>
<script>
  const signIn = document.querySelector('matrix-signin')
  signIn.addEventListener('success', ({ detail }) => {
    console.log(detail.user)
  })
</script>

Vue

<template>
  <matrix-signin @success="notify"></matrix-signin>
</template>

<script>
export default {
  methods: {
    notify (user) {
      alert(JSON.stringify(user))
    }
  }
}
</script>

 Styling

CSS variables available to style

--matrix-signin-shim-background
--matrix-signin-shim-blur
--matrix-signin-dialog-background
--matrix-signin-dialog-border-color
--matrix-signin-dialog-shadow
--matrix-signin-dialog-text-color
--matrix-signin-dialog-icon-color
--matrix-signin-dialog-hover-color
--matrix-signin-dialog-error-color
--matrix-signin-dialog-form-background
--matrix-signin-dialog-button-background
--matrix-signin-dialog-button-color

 <matrix-signin-button>

 HTML attributes

  * target (String), id of the target <matrix-signin> component

Example

<matrix-signin-button target="signin">
  Sign in with Matrix
</matrix-signin-button>

 Development

 1. Clone the repository

git clone https://github.com/mishushakov/signin-with-matrix.git

 2. Install dependencies

npm i

 3. Start dev server

npm run dev

 4. Build

npm run build

 Acknowledgements

  * macOS Big Sur design
  * Icons by Feather
  * focus-trap
  * boringavatars

About

Federated sign-in component for your web app (using Matrix)

mishushakov.github.io/signin-with-matrix

Topics

typescript component webcomponents matrix element svelte signin vite

Resources

Readme

License

MIT License

Sponsor this project

  * https://paypal.me/ushakovhq

Languages

  * Svelte 77.3%
  * HTML 17.1%
  * JavaScript 5.2%
  * TypeScript 0.4%

  * (c) 2021 GitHub, Inc.
  * Terms
  * Privacy
  * Security
  * Status
  * Docs

 

  * Contact GitHub
  * Pricing
  * API
  * Training
  * Blog
  * About

You can't perform that action at this time.
You signed in with another tab or window. Reload to refresh your
session. You signed out in another tab or window. Reload to refresh
your session.