Skip to content
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

Jump to bottom

Add frontend hook #187

Merged
merged 9 commits into from
Nov 2, 2020
Merged

Add frontend hook #187

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c465464
Add frontend hook
Widcket Oct 29, 2020
b7032ce
Export hook, UserProvider and UserProfile
Widcket Oct 30, 2020
4fe480f
Use default export
Widcket Oct 30, 2020
70e0dec
Add browser exports
Widcket Oct 31, 2020
7b388c9
Update api-call-example
Widcket Nov 2, 2020
5280153
Remove Layout props
Widcket Nov 2, 2020
7b14271
Update basic-example
Widcket Nov 2, 2020
22cebfe
Update typescript-example
Widcket Nov 2, 2020
5592ca5
Address review feedback
Widcket Nov 2, 2020
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
1 change: 1 addition & 0 deletions .eslintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
],
"env": {
"node": true,
"browser": true,
"jest": true
},
"settings": {
Expand Down
3 changes: 1 addition & 2 deletions examples/api-call-example/components/header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from 'react';
import Link from 'next/link';

import { useUser } from '../lib/user';
import { useUser } from '@auth0/nextjs-auth0';

const Header = () => {
const { user, loading } = useUser();
Expand Down
7 changes: 3 additions & 4 deletions examples/api-call-example/components/layout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,9 @@ import React from 'react';
import Head from 'next/head';

import Header from './header';
import { UserProvider } from '../lib/user';

const Layout = ({ user, loading = false, children }) => (
<UserProvider value={{ user, loading }}>
const Layout = ({ children }) => (
<>
<Head>
<title>Next.js with Auth0</title>
</Head>
Expand All @@ -29,7 +28,7 @@ const Layout = ({ user, loading = false, children }) => (
font-family: -apple-system, 'Segoe UI';
}
`}</style>
</UserProvider>
</>
);

export default Layout;
56 changes: 28 additions & 28 deletions examples/api-call-example/components/with-auth.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,42 @@
import React, { Component } from 'react';
import React from 'react';
import { useUser } from '@auth0/nextjs-auth0';

import auth0 from '../lib/auth0';
import { fetchUser } from '../lib/user';
import createLoginUrl from '../lib/url-helper';
import RedirectToLogin from '../components/login-redirect';

export default function withAuth(InnerComponent) {
return class Authenticated extends Component {
static async getInitialProps(ctx) {
if (!ctx.req) {
const user = await fetchUser();
return {
user
};
}

const session = await auth0.getSession(ctx.req, ctx.res);
if (!session || !session.user) {
ctx.res.writeHead(302, {
Location: createLoginUrl(ctx.req.url)
});
ctx.res.end();
return;
}

return { user: session.user };
const Authenticated = (props) => {
const { user } = useUser();

if (!user) {
return <RedirectToLogin />; // do you need a "redirecting to login" route?
}

constructor(props) {
super(props);
return <InnerComponent {...props} user={user} />;
};

Authenticated.getInitialProps = async (ctx) => {
if (!ctx.req) {
const response = await fetch('/api/me');
const result = response.ok ? await response.json() : null;

return { user: result };
}

render() {
if (!this.props.user) {
return <RedirectToLogin />;
}
const session = await auth0.getSession(ctx.req, ctx.res);
adamjmcgrath marked this conversation as resolved.
Show resolved Hide resolved

return <div>{<InnerComponent {...this.props} user={this.props.user} />}</div>;
if (!session || !session.user) {
ctx.res.writeHead(302, {
Location: createLoginUrl(ctx.req.url)
});
ctx.res.end();

return;
}

return { user: session.user };
};

return Authenticated;
}
60 changes: 0 additions & 60 deletions examples/api-call-example/lib/user.jsx
View file
Open in desktop

This file was deleted.

15 changes: 15 additions & 0 deletions examples/api-call-example/pages/_app.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from 'react';
import { UserProvider } from '@auth0/nextjs-auth0';

export default function App({ Component, pageProps }) {
// If you've used `withAuth`, pageProps.user can pre-populate the hook
// if you haven't used `withAuth`, pageProps.user is undefined so the hook
// fetches the user from the API routes
const { user, ...otherProps } = pageProps;

return (
<UserProvider user={user}>
<Component {...otherProps} />
</UserProvider>
);
}
5 changes: 1 addition & 4 deletions examples/api-call-example/pages/about.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
import React from 'react';

import Layout from '../components/layout';
import { useFetchUser } from '../lib/user';

export default function About() {
const { user, loading } = useFetchUser();

return (
<Layout user={user} loading={loading}>
<Layout>
<h1>About</h1>
<p>
This is the about page, navigating between this page and <i>Home</i> is always pretty fast. However, when you
Expand Down
6 changes: 3 additions & 3 deletions examples/api-call-example/pages/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import React from 'react';
import { useUser } from '@auth0/nextjs-auth0';

import Layout from '../components/layout';
import { useFetchUser } from '../lib/user';

export default function Home() {
const { user, loading } = useFetchUser();
const { user, loading } = useUser();

return (
<Layout user={user} loading={loading}>
<Layout>
<h1>Next.js and Auth0 Example</h1>

{loading && <p>Loading login info...</p>}
Expand Down
2 changes: 1 addition & 1 deletion examples/api-call-example/pages/profile-ssr.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Layout from '../components/layout';
import withAuth from '../components/with-auth';

const Profile = ({ user }) => (
<Layout user={user}>
<Layout>
<h1>Profile</h1>

<div>
Expand Down
6 changes: 3 additions & 3 deletions examples/api-call-example/pages/profile.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import React from 'react';
import { useUser } from '@auth0/nextjs-auth0';

import Layout from '../components/layout';
import { useFetchUser } from '../lib/user';

export default function Profile() {
const { user, loading } = useFetchUser();
const { user, loading } = useUser();

return (
<Layout user={user} loading={loading}>
<Layout>
<h1>Profile</h1>

{loading && <p>Loading profile...</p>}
Expand Down
6 changes: 3 additions & 3 deletions examples/api-call-example/pages/protected-page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import React from 'react';
import { useUser } from '@auth0/nextjs-auth0';

import Layout from '../components/layout';
import { useFetchUser } from '../lib/user';
import withAuth from '../components/with-auth';

export function ProtectedPage() {
const { user, loading } = useFetchUser();
const { user, loading } = useUser();

return (
<Layout user={user} loading={loading}>
<Layout>
<h1>Protected Page</h1>

{loading && <p>Loading profile...</p>}
Expand Down
4 changes: 1 addition & 3 deletions examples/api-call-example/pages/shows.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,12 @@ import React from 'react';

import useApi from '../lib/use-api';
import Layout from '../components/layout';
import { useFetchUser } from '../lib/user';

export default function TvShows() {
const { user, loading } = useFetchUser();
const { response, error, isLoading } = useApi('/api/shows');

return (
<Layout user={user} loading={loading}>
<Layout>
<h1>TV Shows</h1>

{isLoading && <p>Loading TV shows...</p>}
Expand Down
1 change: 1 addition & 0 deletions examples/basic-example/.npmrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
package-lock=false
3 changes: 1 addition & 2 deletions examples/basic-example/components/header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from 'react';
import Link from 'next/link';

import { useUser } from '../lib/user';
import { useUser } from '@auth0/nextjs-auth0';

const Header = () => {
const { user, loading } = useUser();
Expand Down
7 changes: 3 additions & 4 deletions examples/basic-example/components/layout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,9 @@ import React from 'react';
import Head from 'next/head';

import Header from './header';
import { UserProvider } from '../lib/user';

const Layout = ({ user, loading = false, children }) => (
<UserProvider value={{ user, loading }}>
const Layout = ({ children }) => (
<>
<Head>
<title>Next.js with Auth0</title>
</Head>
Expand All @@ -29,7 +28,7 @@ const Layout = ({ user, loading = false, children }) => (
font-family: -apple-system, 'Segoe UI';
}
`}</style>
</UserProvider>
</>
);

export default Layout;
56 changes: 28 additions & 28 deletions examples/basic-example/components/with-auth.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,42 @@
import React, { Component } from 'react';
import React from 'react';
import { useUser } from '@auth0/nextjs-auth0';

import auth0 from '../lib/auth0';
import { fetchUser } from '../lib/user';
import createLoginUrl from '../lib/url-helper';
import RedirectToLogin from '../components/login-redirect';

export default function withAuth(InnerComponent) {
return class Authenticated extends Component {
static async getInitialProps(ctx) {
if (!ctx.req) {
const user = await fetchUser();
return {
user
};
}

const session = await auth0.getSession(ctx.req, ctx.res);
if (!session || !session.user) {
ctx.res.writeHead(302, {
Location: createLoginUrl(ctx.req.url)
});
ctx.res.end();
return;
}

return { user: session.user };
const Authenticated = (props) => {
const { user } = useUser();

if (!user) {
return <RedirectToLogin />; // do you need a "redirecting to login" route?
}

constructor(props) {
super(props);
return <InnerComponent {...props} user={user} />;
};

Authenticated.getInitialProps = async (ctx) => {
if (!ctx.req) {
const response = await fetch('/api/me');
const result = response.ok ? await response.json() : null;

return { user: result };
}

render() {
if (!this.props.user) {
return <RedirectToLogin />;
}
const session = await auth0.getSession(ctx.req, ctx.res);

return <div>{<InnerComponent {...this.props} user={this.props.user} />}</div>;
if (!session || !session.user) {
ctx.res.writeHead(302, {
Location: createLoginUrl(ctx.req.url)
});
ctx.res.end();

return;
}

return { user: session.user };
};

return Authenticated;
}
Loading