Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@stytch/nextjs
Advanced tools
Readme
Stytch's Next.js Library
With npm
npm install @stytch/nextjs @stytch/vanilla-js --save
This package contains several entrypoints, depending on if you are using the B2B or B2C stytch product.
// Stytch B2C Product
import { StytchProvider } from '@stytch/nextjs';
import { createStytchUIClient } from '@stytch/nextjs/ui';
// The headless client does not bundle UI elements, and is a much smaller package
import { createStytchHeadlessClient } from '@stytch/nextjs/headless';
// Stytch B2B Product
import { StytchB2B } from '@stytch/nextjs/b2b';
import { createStytchB2BUIClient } from '@stytch/nextjs/b2b/ui';
// The headless client does not bundle UI elements, and is a much smaller package
import { createStytchB2BHeadlessClient } from '@stytch/nextjs/b2b/headless';
For full documentation please refer to Stytch's javascript SDK documentation on https://stytch.com/docs/sdks.
import { StytchProvider } from '@stytch/nextjs';
import { createStytchUIClient } from '@stytch/nextjs/ui';
const stytch = createStytchUIClient('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.config} 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/nextjs
# Yarn
yarn add @stytch/vanilla-js @stytch/nextjs
@stytch/stytch-react
packagestytch.js
script via a blocking beforeInteractive
tag in the document header, remove it. It isn't needed anymore.# NPM
npm rm @stytch/stytch-react
# Yarn
yarn remove @stytch/stytch-react
_app.js
<StytchLogin />
component in your application then you should use the the UI client. Otherwise use the Headless client to minimize application bundle size.createStytchHeadlessClient
from @stytch/nextjs/headless
createStytchUIClient
from @stytch/nextjs/ui
<StytchProvider />
component from @stytch/nextjs
import React from 'react';
import { StytchProvider } from '@stytch/nextjs';
import { createStytchHeadlessClient } from '@stytch/nextjs/headless';
// Or alternately
// import { createStytchUIClient } from '@stytch/nextjs/ui';
const stytch = createStytchHeadlessClient(process.env.NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN);
function MyApp({ Component, pageProps }) {
return (
<StytchProvider stytch={stytch}>
<Component {...pageProps} />
</StytchProvider>
);
}
export default MyApp;
useStytchUser
, useStytchSession
, and useStytchLazy
useStytchUser
and useStytchSession
hooks now return envelope objects - { user, isInitialized, isCached }
and { session, isInitialized, isCached }
respectively.
user
/session
will be null and isInitialized
will be falseuser
/session
out of persistent storage, and rerender with 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 { useRouter } from 'next/router';
import { useStytchUser } from '@stytch/nextjs';
export default function Profile() {
const router = useRouter();
const { user, isInitialized } = useStytchUser();
useEffect(() => {
if (isInitialized && user === null) {
router.push('/login');
}
}, [user, isInitialized]);
return (
<Layout>
<h1>Your 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 Next.js Library
The npm package @stytch/nextjs receives a total of 18,341 weekly downloads. As such, @stytch/nextjs popularity was classified as popular.
We found that @stytch/nextjs demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 15 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.