Merging from Dev to Main

examples/README.md

@@ -2,5 +2,6 @@
 
 ## Follow the steps to run each of the example applications:
 
-- [Create React App](./typescript-app/README.md)
-- [Gatsby](./gatsby-app/README.md)
+- [Create React App](./typescript-app)
+- [Gatsby](./gatsby-app)
+- [NextJS](./nextjs-app)

examples/gatsby-app/.env.development.sample

@@ -0,0 +1,2 @@
+GATSBY_LR_APP_NAME=<Your LoginRadius App Name>
+GATSBY_API_KEY=<Your LoginRadius API Key>

examples/gatsby-app/.gitignore

@@ -2,5 +2,11 @@ node_modules/
 .cache/
 public
 .history/
-.env.*
+
 .DS_Store
+
+
+# local env files
+.env
+.env.development
+.env.production

examples/nextjs-app/.env.local.sample

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_LR_APP_NAME=<Your LoginRadius App Name>
+NEXT_PUBLIC_API_KEY=<Your LoginRadius API Key>

examples/nextjs-app/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/nextjs-app/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

examples/nextjs-app/README.md

@@ -0,0 +1,12 @@
+## Implementing Authentication using LoginRadius in NextJS application
+
+## Available Scripts
+
+```json
+"scripts": {
+  "dev": "next dev",
+  "build": "next build",
+  "start": "next start",
+  "lint": "next lint"
+}
+```

examples/nextjs-app/layout/Nav.js

@@ -0,0 +1,43 @@
+import { Button, Flex, Stack } from "@chakra-ui/react";
+import { useLRAuth } from "loginradius-react";
+
+export default function Nav() {
+  const { isAuthenticated, user, loginWithRedirect, logout } = useLRAuth();
+
+  return (
+    <Flex
+      justifyContent="end"
+      alignItems="center"
+      as="nav"
+      bg="green.300"
+      h="10vh"
+      minH="24"
+      p="4"
+    >
+      <Stack spacing={[6, 8]}>
+        {!user && (
+          <Button
+            color="white"
+            bg="black"
+            fontSize="lg"
+            _hover={{ bg: "#111" }}
+            onClick={() => loginWithRedirect()}
+          >
+            Login to continue
+          </Button>
+        )}
+        {isAuthenticated && user && (
+          <Button
+            color="white"
+            bg="black"
+            fontSize="lg"
+            _hover={{ bg: "#111" }}
+            onClick={() => logout()}
+          >
+            Log out
+          </Button>
+        )}
+      </Stack>
+    </Flex>
+  );
+}

examples/nextjs-app/layout/index.js

@@ -0,0 +1,11 @@
+import { Box } from "@chakra-ui/react";
+import Nav from "./Nav";
+
+export default function Layout({ children }) {
+  return (
+    <Box h="100vh" bg="green.50">
+      <Nav />
+      <Box>{children}</Box>
+    </Box>
+  );
+}

examples/nextjs-app/next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  reactStrictMode: true,
+};