github-starred/better-auth
2
0
Fork 0
mirror of https://github.com/better-auth/better-auth.git synced 2026-05-23 23:52:05 -05:00
Code Issues 2.5k Packages Projects Releases 112 Wiki Activity

Error while genrating the backup codes #169

New Issue
Closed
opened 2026-03-13 07:36:03 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-03-13 07:36:03 -05:00
Owner
Copy Link

Originally created by @0xPratikPatil on GitHub (Nov 3, 2024).

Describe the bug
This is the code for generating a backup code and providing it to the user.

To Reproduce

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { toast } from "sonner";
import { authClient } from "@/lib/auth-client";
import { Loader2, RectangleEllipsis } from "lucide-react";

const BackupCodes = () => {
  const [open, setOpen] = useState(false);
  const [backupCodes, setBackupCodes] = useState<string[]>([]);
  const [isLoading, setIsLoading] = useState(false);

  const handleGenerateBackupCodes = async () => {
    setIsLoading(true);
    try {
      const { data, error } = await authClient.twoFactor.generateBackupCodes();
      if (error) {
        throw new Error(error.message);
      }
      setBackupCodes(data.backupCodes);
      setOpen(true);
    } catch (err) {
      toast.error(err.message || "Failed to generate backup codes.");
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div>
      <Button
        variant="outline"
        onClick={handleGenerateBackupCodes}
        disabled={isLoading}
      >
        {isLoading ? (
          <>
            <Loader2 size={15} className="animate-spin" />
            Generating...
          </>
        ) : (
          <>
            <RectangleEllipsis size={15} />
            Generate Backup Codes
          </>
        )}
      </Button>

      <Dialog open={open} onOpenChange={setOpen}>
        <DialogTrigger asChild>
          <Button variant="outline" className="hidden" />
        </DialogTrigger>
        <DialogContent className="sm:max-w-[425px] w-11/12">
          <DialogHeader>
            <DialogTitle>Backup Codes</DialogTitle>
            <DialogDescription>
              These backup codes can be used to access your account if you lose
              access to your two-factor authentication device.
            </DialogDescription>
          </DialogHeader>
          <div className="flex flex-col gap-2">
            {backupCodes.length > 0 ? (
              backupCodes.map((code, index) => (
                <div key={index} className="p-2 border rounded-md bg-gray-100">
                  {code}
                </div>
              ))
            ) : (
              <p className="text-sm text-muted-foreground">
                No backup codes generated yet.
              </p>
            )}
          </div>
          <DialogFooter>
            <Button onClick={() => setOpen(false)}>Close</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
};

export default BackupCodes;

Expected behavior
It must return the backup code

Screenshots
Screenshot 2024-11-03 at 12 10 33 PM

Originally created by @0xPratikPatil on GitHub (Nov 3, 2024). **Describe the bug** This is the code for generating a backup code and providing it to the user. **To Reproduce** ``` "use client"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; import { toast } from "sonner"; import { authClient } from "@/lib/auth-client"; import { Loader2, RectangleEllipsis } from "lucide-react"; const BackupCodes = () => { const [open, setOpen] = useState(false); const [backupCodes, setBackupCodes] = useState<string[]>([]); const [isLoading, setIsLoading] = useState(false); const handleGenerateBackupCodes = async () => { setIsLoading(true); try { const { data, error } = await authClient.twoFactor.generateBackupCodes(); if (error) { throw new Error(error.message); } setBackupCodes(data.backupCodes); setOpen(true); } catch (err) { toast.error(err.message || "Failed to generate backup codes."); } finally { setIsLoading(false); } }; return ( <div> <Button variant="outline" onClick={handleGenerateBackupCodes} disabled={isLoading} > {isLoading ? ( <> <Loader2 size={15} className="animate-spin" /> Generating... </> ) : ( <> <RectangleEllipsis size={15} /> Generate Backup Codes </> )} </Button> <Dialog open={open} onOpenChange={setOpen}> <DialogTrigger asChild> <Button variant="outline" className="hidden" /> </DialogTrigger> <DialogContent className="sm:max-w-[425px] w-11/12"> <DialogHeader> <DialogTitle>Backup Codes</DialogTitle> <DialogDescription> These backup codes can be used to access your account if you lose access to your two-factor authentication device. </DialogDescription> </DialogHeader> <div className="flex flex-col gap-2"> {backupCodes.length > 0 ? ( backupCodes.map((code, index) => ( <div key={index} className="p-2 border rounded-md bg-gray-100"> {code} </div> )) ) : ( <p className="text-sm text-muted-foreground"> No backup codes generated yet. </p> )} </div> <DialogFooter> <Button onClick={() => setOpen(false)}>Close</Button> </DialogFooter> </DialogContent> </Dialog> </div> ); }; export default BackupCodes; ``` **Expected behavior** It must return the backup code **Screenshots** <img width="1113" alt="Screenshot 2024-11-03 at 12 10 33 PM" src="https://github.com/user-attachments/assets/319bc9a8-9dc2-4cb7-9fc2-f12d84f18e77">
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
adapter
astro
awaiting external contributor
blocked
breaking
breaking change
bug
c-devops
core
credentials
database
dependencies
devops
devtools
docs
documentation
duplicate
elysia
enhancement
enterprise
expo
express
fastify
good first issue
help wanted
hono
identity
infra
integration
invalid
javascript
locked
maintenance
need-more-information
needs: info
needs: repro
nextjs
nuxt
oauth
organization
P0
payments
perf
platform
plugin
pull-request
Mirrored from GitHub Pull Request
 question
ready
regression
remix
security
social-provider
solid
stale
svelte
tanstack-start
tracking
version-bump
vue
wontfix
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/better-auth#169
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?