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
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 i signin-with-matrix
Import into your application with
import signIn from 'signin-with-matrix'
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<matrix-signin>
displayName
(String), name that will be displayed in Matrixtitle
(String), modal titlehomeserver
(String), default home serverExample
<matrix-signin
displayName="My app"
title="Use my app with Matrix"
homeserver="matrix.org">
</matrix-signin>
open()
, opens the modalclose()
, closes the modalcancel()
, cancels the modal (will send cancel event)isSignedIn()
, checks if user is signed ingetUser()
, returns current user, returns PromisesignOut()
, sign out, returns Promiseopen
, when modal openscancel
, when modal is cancelledsuccess
, when login has succeeded (with user object)error
, when error occurs (with error object)signout
, when user signs outExample
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>
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>
target
(String), id of the target <matrix-signin>
componentExample
<matrix-signin-button target="signin">
Sign in with Matrix
</matrix-signin-button>
git clone https://github.com/mishushakov/signin-with-matrix.git
npm i
npm run dev
npm run build