how do you handle successful login in oauth?

Answered

American black bear posted this in #help-forum

American black bearOP

2024-02-06T19:48:59.000Z

i cannot figure out how to handle a successful login after redirect in an oauth login system,

Answered by American black bear

my solution:
export async function GET(req: NextRequest) {
const param= req.nextUrl.searchParams.get("param") as string}

View full answer

30 Replies

Masai Lion

2024-02-06T19:49:11.000Z

code?

and a bit more of info pls

American black bearOP

2024-02-06T19:49:48.000Z

yeah i just created the post, let me explain real quick

how do i handle the redirect after a successful login in a oauth system? for instance, the user, after logging in, gets redirected to a redirect uri i set up with the access token in the url. my question is how do i extract that access token from the url for later use and redirect the user to the url i want?

@American black bear how do i handle the redirect after a successful login in a oauth system? for instance, the user, after logging in, gets redirected to a redirect uri i set up with the access token in the url. my question is how do i extract that access token from the url for later use and redirect the user to the url i want?

Masai Lion

2024-02-06T20:09:29.000Z

Mmm you can handle the redirect after a successful login in an OAuth system by utilizing Next.js routing and the useRouter hook provided by Next.js.

Something like this:

import { useRouter } from 'next/router';
import { useEffect } from 'react';

function LoginPage() {
  const router = useRouter();

  useEffect(() => {
    // Extract access token from the URL query parameters
    const { access_token } = router.query;

    if (access_token) {
      // Store the access token for later use (like in local storage)
      localStorage.setItem('accessToken', access_token);

      // Then redirect 
      router.push('/dashboard');
    }
  }, [router.query]);

  return (
    <div>
      {/* Your form  */}
    </div>
  );
}

export default LoginPage;

LoginPage is our component where the user is redirected after successful login. Inside the useEffect hook, we extract the access_token from the query parameters using router.query. If an access token is found, we store it in local storage and redirect the user to the /dashboard page using router.push('/dashboard') or whatever your directory is

@Masai Lion js import { useRouter } from 'next/router'; import { useEffect } from 'react'; function LoginPage() { const router = useRouter(); useEffect(() => { // Extract access token from the URL query parameters const { access_token } = router.query; if (access_token) { // Store the access token for later use (like in local storage) localStorage.setItem('accessToken', access_token); // Then redirect router.push('/dashboard'); } }, [router.query]); return ( <div> {/* Your form */} </div> ); } export default LoginPage;

American black bearOP

2024-02-06T20:21:05.000Z

shouldn't i use useSearchParams() instead of router.query? im using app router

Masai Lion

2024-02-06T20:22:22.000Z

Yeah

Sorry

American black bearOP

2024-02-06T20:22:58.000Z

and i would need to run this whole thing on client right?

Masai Lion

2024-02-06T20:23:50.000Z

As far as I understand then you would typically run this code on the client side because it involves interacting with the browser's URL and localStorage, which are client-side functionalities.

import { useRouter } from 'next/router';
import { useEffect } from 'react';

function LoginPage() {
  const router = useRouter();

  useEffect(() => {
    const queryParams = new URLSearchParams(router.asPath.split('?')[1]);
    const accessToken = queryParams.get('access_token');

    if (accessToken) {
      localStorage.setItem('accessToken', accessToken);
      router.push('/dashboard');
    }
  }, []);

  return (
    <div>
      {/* Login form goes here */}
    </div>
  );
}

export default LoginPage;