Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@stytch/react
Advanced tools
Stytch's React Library
With npm
npm install @stytch/react @stytch/vanilla-js --save
For full documentation please refer to Stytch's javascript SDK documentation at https://stytch.com/docs/sdks/javascript-sdk.
import { StytchProvider } from '@stytch/react';
import { StytchUIClient } from '@stytch/vanilla-js';
const stytch = new StytchUIClient('public-token-<find yours in the stytch dashboard>');
// Wrap your App in the StytchProvider
ReactDOM.render(
<StytchProvider stytch={stytch}>
<App />
</StytchProvider>,
document.getElementById('root'),
);
// Now use Stytch in your components
const App = () => {
const stytchProps = {
config: {
products: ['emailMagicLinks'],
emailMagicLinksOptions: {
loginRedirectURL: 'https://example.com/authenticate',
loginExpirationMinutes: 30,
signupRedirectURL: 'https://example.com/authenticate',
signupExpirationMinutes: 30,
createUserAsPending: true,
},
},
styles: {
container: { width: '321px' },
colors: { primary: '#0577CA' },
fontFamily: '"Helvetica New", Helvetica, sans-serif',
},
callbacks: {
onEvent: (message) => console.log(message),
onSuccess: (message) => console.log(message),
onError: (message) => console.log(message),
},
};
return (
<div id="login">
<StytchLogin
config={stytchProps.loginOrSignupView}
styles={stytchProps.styles}
callbacks={stytchProps.callbacks}
/>
</div>
);
};
There are built in typescript definitions in the npm package.
If you are migrating from @stytch/stytch-react, follow the steps below:
# NPM
npm install @stytch/vanilla-js @stytch/react
# Yarn
yarn add @stytch/vanilla-js @stytch/react
@styth/stytch-react
packagestytch.js
script in the document header, remove it. It isn't needed anymore.# NPM
npm rm @stytch/stytch-react
# Yarn
yarn remove @stytch/stytch-react
<StytchLogin />
component in your application then you should use the the UI client. Otherwise use the Headless client to minimize application bundle size.StytchHeadlessClient
from @stytch/vanilla-js/headless
StytchUIClient
from @stytch/vanilla-js
<StytchProvider />
component from @stytch/react
import React from 'react';
import { StytchProvider } from '@stytch/react';
import { StytchHeadlessClient } from '@stytch/vanilla-js/headless';
// Or alternately
// import { StytchUIClient } from '@stytch/vanilla-js';
const stytch = new StytchHeadlessClient(process.env.REACT_APP_STYTCH_PUBLIC_TOKEN);
function WrappedApp() {
return (
<StytchProvider stytch={stytch}>
<App />
</StytchProvider>
);
}
export default WrappedApp;
useStytchUser
, useStytchSession
, and useStytchLazy
useStytchUser
and useStytchSession
hooks now return envelope objects - { user, isCached }
and { session, isCached }
respectively.
isCached: true
- at this point you’re reading the stale-while-revalidating valueisCached: false
useStytchLazy
is no longer required - you may always call useStytch
nowimport React, { useEffect } from 'react';
import { useStytchUser } from '@stytch/react';
export default function Profile() {
const router = useRouter();
const { user, isCached } = useStytchUser();
return (
<Layout>
<h1>Your {isCached ? 'Cached' : null} Profile</h1>
<pre>{JSON.stringify(user, null, 2)}</pre>
</Layout>
);
}
We've made a number of small changes to our naming conventions to make the API cleaner and easier to understand.
<Stytch />
login component is now called <StytchLogin />
OAuthProvidersTypes
enum is now called OAuthProviders
SDKProductTypes
enum is now called Products
styles
config documented hereFAQs
Stytch's official React Library
The npm package @stytch/react receives a total of 6,689 weekly downloads. As such, @stytch/react popularity was classified as popular.
We found that @stytch/react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.