Skip to content

feat: remove old nextjs instructions #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mhamann merged 1 commit into from
Nov 21, 2024
Merged

feat: remove old nextjs instructions #31

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 7 additions & 38 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,49 +40,17 @@ The Rownd React SDK automatically injects the Rownd Hub snippet into your React
- `postLoginRedirect` (optional): Where the browser should redirect the user after a successful sign-in. If not supplied, the user will remain on the same page.
- `rootOrigin` (optional): If you're using Rownd across multiple domains (e.g., `rownd.io` and `app.rownd.io`), set this to the "root" _origin_ (e.g., https://rownd.io).

### React Next.js
Rownd currently utilizes client-side rendering for some of its components.
### Provider props

In the root `layout.tsx` of your app:

```jsx
import { NextJSRowndProvider } from '@rownd/next';

export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode,
}>) {
return (
<html lang="en">
<body>
<NextJSRowndProvider
appKey="<your app key>"
apiUrl="<your api url>"
hubUrlOverride="<your hub url>"
>
{children}
</NextJSRowndProvider>
</body>
</html>
);
}
```

### NextJSRowndProvider props

- `appKey` (required): This is the key generated by the [Rownd dashboard](https://app.rownd.io).
- `apiUrl` (optional): The URL of your Rownd API instance.
- `hubUrlOverride` (optional): The URL of your Rownd Hub instance.

**Be sure to import the Rownd NextJS component from @rownd/react/next**
* `appKey` (required): This is the key generated by the [Rownd dashboard](https://app.rownd.io).
* `postLoginRedirect` (optional): Where the browser should redirect the user after a successful sign-in. If not supplied, the user will remain on the same page.
* `rootOrigin` (optional): If you're using Rownd across multiple domains (e.g., `rownd.io` and `app.rownd.io`), set this to the "root" _origin_ (e.g., https://rownd.io).

Later on within your app's components, you can use the Rownd hook to access the Rownd browser API:

```jsx
"use client";
import React from 'react';
import { useRownd } from '@rownd/next';
import { useRownd } from '@rownd/react';

export default function MyProtectedComponent(props) {
const { is_authenticated, user, requestSignIn, is_initializing } = useRownd();
Expand All @@ -97,7 +65,8 @@ export default function MyProtectedComponent(props) {
<div>
{is_authenticated ? (
<div>
<h1>Welcome {user.data.full_name}</h1>
<h1>Welcome {user.data.first_name}</h1>
<h2>Email:{user.data.email}</h2>
<button onClick={() => getAccessToken()}>Get access token</button>
</div>
) : (
Expand Down