Skip to content

Instantly share code, notes, and snippets.

View perkinsjr's full-sized avatar

James P perkinsjr

View GitHub Profile
@perkinsjr
perkinsjr / MFACreator.tsx
Created June 8, 2023 12:05
Example of MFA Creation in a custom flow.
import { useUser } from "@clerk/nextjs";
import { type NextPage } from "next";
import { useState } from "react";
import QRCode from "react-qr-code";
const MFACreator: NextPage = () => {
const [qrUri, setQRURI] = useState("");
const [readyToVerify, setReadyToVerify] = useState(false);
const [verified, setVerified] = useState(false);
const [code, setCode] = useState("");
@perkinsjr
perkinsjr / example.tsx
Created June 7, 2023 20:11
Shows multiple factor in custom flow
import { useState } from "react";
import { useSignIn } from "@clerk/nextjs";
import { useRouter } from "next/router";
export default function SignInForm() {
const { isLoaded, signIn, setActive } = useSignIn();
const [emailAddress, setEmailAddress] = useState("");
const [password, setPassword] = useState("");
const [totp, setTotp] = useState("");
const [needsVerify, setNeedsVerify] = useState(false);
@perkinsjr
perkinsjr / layout.tsx
Created May 25, 2023 22:53
Example of Server component sign out
import '../styles/globals.css'
import { ClerkProvider, SignInButton, SignedIn, SignedOut, SignOutButton } from '@clerk/nextjs'
import { Inter } from 'next/font/google'
import Image from 'next/image'
import Script from 'next/script'
import styles from '../styles/Header.module.css'
import Link from 'next/link'
const inter = Inter({ subsets: ['latin'] })
@perkinsjr
perkinsjr / middleware.ts
Last active January 31, 2024 11:06
Using Clerk with Upstash for Middleware rate limiting and API Protection
import { getAuth, withClerkMiddleware } from "@clerk/nextjs/server";
import { NextResponse, NextFetchEvent } from "next/server";
import type { NextRequest } from "next/server";
import { Ratelimit } from "@upstash/ratelimit";
import { Redis } from "@upstash/redis";
// Add public paths for Clerk to handle.
const publicPaths = ["/", "/sign-in*", "/sign-up*", "/api/blocked"];
// set your rate limit.
@perkinsjr
perkinsjr / signup.tsx
Created April 2, 2023 20:13
Check if it exists Clerk Phone
await signUp
.create({
phoneNumber,
})
.catch((err) => {
if (err.errors[0].code === "form_identifier_exists") {
//handle it now.
console.log("gracefully handle this error and switch them to sign in")
}
});
@perkinsjr
perkinsjr / webhook.ts
Created March 31, 2023 11:01
A simple example of Clerk + Webhook + Prisma
import type { IncomingHttpHeaders } from "http";
import type { NextApiRequest, NextApiResponse } from "next";
import type { WebhookRequiredHeaders } from "svix";
import type { User } from "@clerk/nextjs/dist/api";
import { Webhook } from "svix";
import { prisma } from "../../server/db";
type UnwantedKeys = "emailAddresses" | "firstName" | "lastName" | "primaryEmailAddressId" | "primaryPhoneNumberId" | "phoneNumbers";
interface UserInterface extends Omit<User , UnwantedKeys>{
@perkinsjr
perkinsjr / global.css
Created July 21, 2022 18:28
global CSS default
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
a {
color: inherit;
const functions = require("firebase-functions");
exports.getToken =
functions.https.onRequest((req, res) => {
res.set("Access-Control-Allow-Origin", "SET ORIGIN");
if (req.method === "OPTIONS") {
// Send response to OPTIONS requests
res.set("Access-Control-Allow-Methods", "GET");
res.set("Access-Control-Allow-Headers", "Content-Type");
npm install @11ty/eleventy @11ty/eleventy-plugin-syntaxhighlight @tailwindcss/typography autoprefixer cross-env css-loader mini-css-extract-plugin npm-run-all postcss postcss-import postcss-loader tailwindcss webpack webpack-cli
@perkinsjr
perkinsjr / devSetup.ps1
Last active April 3, 2019 11:57
Choco install for dev machine and remove some UWPs that no body needs
ECHO Installing apps
ECHO Configure chocolatey
choco feature enable -n allowGlobalConfirmation
# DEV