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.

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

[NEW] Add auth0 component #74

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

abhinavkrin
Copy link
Member

This PR adds auth0 authentication to RC4Community.

Setting up

  1. Set up environment variables
# A long, secret value used to encrypt the session cookie
AUTH0_SECRET='a_long_random_string'
# The base url of your application
AUTH0_BASE_URL='http://localhost:3000'
# The url of your Auth0 tenant domain
AUTH0_ISSUER_BASE_URL='https://sample_app.us.auth0.com'
# Your Auth0 application's Client ID
AUTH0_CLIENT_ID='your client id'
# Your Auth0 application's Client Secret
AUTH0_CLIENT_SECRET='your client secret'
# API route for auth0 login (do not not change, since we have used custom routes for auth0)
NEXT_PUBLIC_AUTH0_LOGIN='/api/auth0/login'
# API route for auth0 profile (do not not change, since we have used custom routes for auth0)
NEXT_PUBLIC_AUTH0_PROFILE='/api/auth0/me'
# API route for auth0 callback (do not not change, since we have used custom routes for auth0)
AUTH0_CALLBACK='/api/auth0/callback'
# URL to redirect after logout (set a value to override default). Must be present in list of logout urls in auth0 dashboard.
AUTH0_POST_LOGOUT_REDIRECT='/'

For more environment variables visit https://auth0.github.io/nextjs-auth0/modules/config.html

  1. You must add callback url and logout urls accordingly in application settings in auth0 dashboard.
  2. Wrap your app with <UserProvider> component.
import '/styles/globals.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Layout from '../components/layout';
import SSRProvider from 'react-bootstrap/SSRProvider';
import { UserProvider } from '@auth0/nextjs-auth0';

function MyApp({ Component, pageProps }) {
  return (
    <SSRProvider>
      <UserProvider>
        <Layout menu={pageProps}>
          <Component {...pageProps} />
        </Layout>
      </UserProvider>
    </SSRProvider>
  );
}

export default MyApp;
  1. Get login url from getAuth0LoginURL() and logout url from getAuth0LogoutURL(). Use useUser() hook to get user details.
import { useUser, withPageAuthRequired } from '@auth0/nextjs-auth0';
import { getAuth0LoginURL, getAuth0LogoutURL } from '/app/components/auth/auth0';
export default () => {
    const { user, error, isLoading } = useUser();
    if (isLoading) return <div>Loading...</div>;
    if (error) return <div>{error.message}</div>;
    if (user) {
        return (
            <div>
            Welcome {user.name}! <a href={getAuth0LogoutURL()}>Logout</a>
            </div>
        );
    }
    return <a href={getAuth0LoginURL({redirectToThisPage: true})}>Login</a>;
};

P.S. I will be updating this pr description on changes.

@abhinavkrin abhinavkrin marked this pull request as ready for review February 6, 2022 16:34
@abhinavkrin abhinavkrin changed the title [WIP] Add auth0 component [NEW] Add auth0 component Feb 6, 2022
@Sing-Li Sing-Li added this to the Web 3 Demo Community milestone May 23, 2022
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.

2 participants