# @userfront/nextjs

> Userfront Next.js binding

Latest version **0.1.4** (published 2021-11-11) · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @userfront/nextjs
pnpm add @userfront/nextjs
yarn add @userfront/nextjs
bun add @userfront/nextjs
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2021-11-11 |
| First published | 2021-08-10 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 12.9 KB |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Userfront |
| Maintainers | tyrw, damionvega |
| Keywords | Userfront |

## Links

- npm: https://www.npmjs.com/package/@userfront/nextjs
- Repository: https://github.com/userfront/userfront-nextjs
- Homepage: https://github.com/userfront/userfront-nextjs#readme
- Issues: https://github.com/userfront/userfront-nextjs/issues
- npm.io page: https://npm.io/package/@userfront/nextjs

## Dependencies (4)

- [jsonwebtoken](https://npm.io/package/jsonwebtoken.md) ^8.5.1
- [next-cookies](https://npm.io/package/next-cookies.md) ^2.0.3
- [@userfront/core](https://npm.io/package/@userfront/core.md) ^0.2.33
- [@userfront/react](https://npm.io/package/@userfront/react.md) ^0.2.22

## Recent versions

- 0.1.4 (latest) — 2021-11-11
- 0.1.3 — 2021-09-25
- 0.1.2 — 2021-08-10

## README

# Userfront Next.js

The Userfront Next.js binding allows you to quickly add pre-built signup, login, and password reset forms to your Next.js application.

This binding includes all methods from the Userfront [core JS library](https://userfront.com/docs/js.html).

## Setup

You can find installation instructions for your account in the **Toolkit** section of the Userfront dashboard.

### 1. Install the `@userfront/nextjs` package with npm (or yarn)

```sh
npm install @userfront/nextjs --save
```

### 2. Initialize Userfront and any tools you want to use, then render them

```js
import Userfront from "@userfront/nextjs";

Userfront.init("demo1234");

const SignupForm = Userfront.build({
  toolId: "nkmbbm",
});

class Demo extends React.Component {
  render() {
    return <SignupForm />;
  }
}
```

This example uses the following:

- Account ID: `demo1234`
- Tool ID: `nkmbbm` (signup form)

This will add a working signup form to your page:

![Signup form](https://res.cloudinary.com/component/image/upload/v1597168270/permanent/signup-mod.png)

## Core JS methods

When you add the Userfront Next.js binding to your application, you can use any of the methods from the Userfront core JS library too.

Docs for the core JS methods are here: https://userfront.com/docs/js.html

Note that you do **not** need to import `@userfront/core` separately when using the React binding.

Examples:

```js
// Import and initialize Userfront Next.js
import Userfront from "@userfront/nextjs";
Userfront.init("demo1234");

// Send a login link
Userfront.sendLoginLink("jane@example.com");

// Read the access token
Userfront.tokens.accessToken;

// => "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJtb2RlIjoidGVzdCIsImlzQ29uZmlybWVkIjp0cnVlLCJ1c2VySWQiOjEsInVzZXJVdWlkIjoiZDAwNTlmN2UtYzU0OS00NmYzLWEzYTMtOGEwNDY0MDkzZmMyIiwidGVuYW50SWQiOiJwOW55OGJkaiIsInNlc3Npb25JZCI6IjRlZjBlMjdjLTI1NDAtNDIzOS05YTJiLWRkZjgyZjE3YmExYiIsImF1dGhvcml6YXRpb24iOnsicDlueThiZGoiOnsidGVuYW50SWQiOiJwOW55OGJkaiIsIm5hbWUiOiJVc2VyZnJvbnQiLCJyb2xlcyI6WyJhZG1pbiJdLCJwZXJtaXNzaW9ucyI6W119fSwiaWF0IjoxNjE3MTQ4MDY3LCJleHAiOjE2MTk3NDAwNjd9.gYz4wxPHLY6PNp8KPEyIjLZ8QzG3-NFJGPitginuLaU"

// Log the user out
Userfront.logout();

// Access the user's information
Userfront.user;

/** =>
 * {
 *    email: "jane@example.com",
 *    name: "Jane Example",
 *    image: "https://res.cloudinary.com/component/image/upload/avatars/avatar-plain-9.png",
 *    data: {},
 *    username: "jane-example",
 *    confirmedAt: "2020-01-01T00:00:00.000Z",
 *    isConfirmed: true,
 *    createdAt: "2020-01-01T00:00:00.000Z",
 *    updatedAt: "2020-01-01T00:00:00.000Z",
 *    mode: "test",
 *    tenantId: "demo1234",
 *    userId: 1,
 *    userUuid: "d6f0f045-f6ea-4262-8724-dfc0b77e7dc9",
 * }
 */
```

---
_Source: https://npm.io/package/@userfront/nextjs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._