Skip to content

add login and pro platform features to react flow docs #699

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.

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

Draft
wants to merge 41 commits into
base: main
Choose a base branch
from

Conversation

dimaMachina
Copy link
Contributor

@dimaMachina dimaMachina commented Mar 7, 2025

closes #690

Important

don't forget to setup NEXT_PUBLIC_NHOST_SUBDOMAIN and NEXT_PUBLIC_NHOST_REGION env variables!

  • moved all pro components/pages to reactflow.com
  • magic link works like before
  • No need for a manual new UserProvider (I previously proposed it)
  • NhostClient's storage type changed to cookie so we can authenticate in RSC too
  • accessing /dashboard/... will redirect to /signin (when NOT authenticated)
  • accessing pages from (auth) will redirect to /dashboard (when authenticated)
  • Where dashboard pages should live? I put them in /dashboard

Updated

  • No need to refactor everything to server actions (or did I miss something?)

    refactored

  • Let’s combine Sign In and Sign Out into 1 button? it takes up a lot of space in the header

    combined, wdyt?

Copy link

vercel bot commented Mar 7, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
example-apps ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 14, 2025 8:56pm
svelteflow-website ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 14, 2025 8:56pm
ui-components ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 14, 2025 8:56pm
xyflow-website ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 14, 2025 8:56pm

Copy link

vercel bot commented Mar 7, 2025

@dimaMachina is attempting to deploy a commit to the xyflow Team on Vercel.

A member of the Team first needs to authorize it.

Comment on lines +26 to +31
// Must set `nhostRefreshTokenExpiresAt`
// https://github.com/nhost/nhost/blob/c0635ae1c7d5fe3bd889d11291ebc6978e866647/packages/hasura-auth-js/src/machines/authentication/machine.ts#L647C15-L649C81
// const nextRefresh = new Date(Date.now() + session.accessTokenExpiresIn * 1_000)
// const value = nextRefresh.toISOString();
// console.log({value})
// cookieStore.set(NHOST_JWT_EXPIRES_AT_KEY, nextRefresh.getTime(), { path: '/' })
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// Must set `nhostRefreshTokenExpiresAt`
// https://github.com/nhost/nhost/blob/c0635ae1c7d5fe3bd889d11291ebc6978e866647/packages/hasura-auth-js/src/machines/authentication/machine.ts#L647C15-L649C81
// const nextRefresh = new Date(Date.now() + session.accessTokenExpiresIn * 1_000)
// const value = nextRefresh.toISOString();
// console.log({value})
// cookieStore.set(NHOST_JWT_EXPIRES_AT_KEY, nextRefresh.getTime(), { path: '/' })

Comment on lines +30 to +36
// const refreshTokenValue = cookieStore.get(NHOST_REFRESH_KEY)?.value;
// if (refreshTokenValue) {
// const { error, session } = await nhost.auth.refreshSession(refreshTokenValue);
// if (error) {
// console.error(error);
// }
// }
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// const refreshTokenValue = cookieStore.get(NHOST_REFRESH_KEY)?.value;
// if (refreshTokenValue) {
// const { error, session } = await nhost.auth.refreshSession(refreshTokenValue);
// if (error) {
// console.error(error);
// }
// }

};

loadFiles();
// eslint-disable-next-line react-hooks/exhaustive-deps
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks/exhaustive-deps -- only on mount

"file-saver": "2.0.5",
"jszip": "3.10.1",
"@apollo/client": "3.7.15",
"fathom-client": "3.5.0",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think we already have it

"next-sitemap": "^4.2.3",
"nextra": "^4.3.0-alpha.22",
"nextra-theme-docs": "^4.3.0-alpha.22",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.5.0",
"timeago-react": "^3.0.7",
"ui-components": "workspace:*",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ui components not used in this repo

@chrtze chrtze changed the title add login and pro platform to reactflow.com add login and pro platform features to react flow docs May 20, 2025
teamPlan: SubscriptionPlan;
}> {
const nhost = await getNhost();
const userId = nhost.auth.getUser()!.id!;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const userId = nhost.auth.getUser()!.id!;
if (!userId) {
return {
plan: SubscriptionPlan.FREE,
teamPlan: SubscriptionPlan.FREE,
};
}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If there is no userId, for example when user is signed out, I getting a graphql error.

@chrtze chrtze marked this pull request as draft May 20, 2025 10:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Login for the docs
2 participants