UI config
Fields
config* object
styles object
callbacks object
import React from 'react';
import { StytchLogin } from '@stytch/react';
const Login = () => {
const style = {
fontFamily: 'Arial',
};
const callbacks = {
onEvent: ({ type, data }) => {
if (type === 'MAGIC_LINK_LOGIN_OR_CREATE') {
console.log('Email magic Link sent', data);
}
},
onError: (data) => {
console.log(data);
},
};
const config = {
products: ['emailMagicLinks', 'oauth'],
emailMagicLinksOptions: {
loginRedirectURL: 'https://example.com/authenticate',
loginExpirationMinutes: 30,
signupRedirectURL: 'https://example.com/authenticate',
signupExpirationMinutes: 30,
},
oauthOptions: {
providers: [{ type: 'google', one_tap: true, position: 'floating' }, { type: 'microsoft' }],
},
};
return (
<div className="sign-in-container">
<StytchLogin config={config} styles={style} callbacks={callbacks} />
</div>
);
};
export default Login;