Question: Login/Signup without redirecting to Universal Login

FacundoMalgieri commented 4 years ago

I'm working on a NextJs project in which I have my custom login page. I was wondering if I could use this package to authenticate but without redirecting to Auth0's Universal Login. In case I cant, could you point me in the right direction? The only constraint I have is to avoid having sensitive data Client side, that's why I'm using the pages/api approach, using my .env sensitive vars from there to avoid exposing them to the Client.

Thanks!

theivanfranco commented 4 years ago

+1 on this. Would love to see an implementation/example without the redirect 👍

livelo-app commented 4 years ago

Yes you can, but you will also need to use: auth0-js

I have created my own UI and used auth0-js WebAuth.login() to pass in the email and password field from my custom form. Then I use auth0/nextjs-auth0 Callback to save the user's session. One thing you'll need to do is pass the state which I created a pull request to add the capability. It is only a 2 line change in the code.

phillip055 commented 4 years ago

Can we use react sdk instead?

Bathlamos commented 4 years ago

@livelo-app I saw that your PR was rejected but I'm very interested in the path that you suggested (using auth0-js WebAuth.login() for the initial login request but redirecting to an nextjs-auth0 callback). Do you have an updated way to achieve that?

Alternately, a question for @sandrinodimattia who rejected #101: is there a way to have auth0-js and nextjs-auth0 better interop? I'd love to have a custom auth0.js login page but know on the server side (preferably using this library) whether a user is logged in or not, to protect API endpoints.

knightss27 commented 4 years ago

If you want to skip the universal login page you can specify authParams with the connection set to a valid connection name, which I think could be a social connection or db. This example will forward the user straight to the google OAuth page, assuming you have that social connection set up. I've found that it does force the user to login if authenticated already though, whereas I've found that using the universal page will detect if the session is already authorized and redirect past. This auth0 forum post has more about finding connection names.

export default async function login(req, res) {
    try {
        await auth0.handleLogin(req, res, {
            authParams: {
                connection: 'google-oauth2',
            }
        })
    } catch (error) {
        console.error(error);
        res.status(error.status || 500).end(error.message)
    }
}

pauloneto94 commented 4 years ago

Hey @livelo-app , did you configure auth0 as SPA or regular web application to work with auth0/nextjs-auth0 + auth0-js?

philihp commented 4 years ago

I have a similar requirement to this issue. auth0-js doesn't work as an API route because of https://github.com/auth0/auth0.js/issues/878, however I was able to get a signup by doing the following. Hope this helps you, my dear reader.

import config from '../../lib/auth0-config'

export default async function signup({ email, password }, res) {
  const auth0Response = await fetch(
    `https://${config.AUTH0_DOMAIN}/dbconnections/signup`,
    {
      method: 'POST',
      headers: {
        'content-type': 'application/json',
      },
      body: JSON.stringify({
        client_id: config.AUTH0_CLIENT_ID,
        connection: 'Username-Password-Authentication',
        email,
        password,
      }),
    }
  )
  const body = await auth0Response.json()
  res.status(200).end(JSON.stringify(body))
}

Widcket commented 3 years ago

We do not recommend using cross-origin (embedded) authentication. Check out the following docs page: https://auth0.com/docs/universal-login/universal-vs-embedded-login#:~:text=Universal%20Login%20does%20not%20send,and%20the%20user's%20authentication%20credentials.

christowiz commented 3 years ago

I'm not sure why this was closed. This original and subsequent answers haven't been answered. Auth0 may not recommend embedded authentication but it is one of the options. I am also looking for a custom login solution with Next.js that allows me to use the serverless feature approach

After some more research I see that the goal for nextjs-auth0 is to only support Universal Login. https://github.com/auth0/nextjs-auth0/issues/141#issuecomment-764533775

Widcket commented 3 years ago

cc @adamjmcgrath

yashraj021 commented 2 years ago

Yes you can, but you will also need to use: auth0-js

I have created my own UI and used auth0-js WebAuth.login() to pass in the email and password field from my custom form. Then I use auth0/nextjs-auth0 Callback to save the user's session. One thing you'll need to do is pass the state which I created a pull request to add the capability. It is only a 2 line change in the code.

Can you give a link to the example

eiiot commented 2 years ago

You can do this with nextjs-auth0 and handleAuth

import { afterCallback } from '../../../../lib/auth0/afterCallback'
import {
  handleAuth,
  handleLogin,
  handleLogout,
  handleCallback,
  RequestError,
} from '@auth0/nextjs-auth0'

export default handleAuth({
  async login(req, res) {
    try {
      await handleLogin(req, res, {
        returnTo: req.headers.referer,
        authorizationParams: {
          connection: // YOUR CONNECTION NAME HERE
        },
      })
    } catch (error) {
      if (error instanceof RequestError) {
        res.status(error.status || 500).end(error.message)
      } else {
        throw error
      }
    }
  },
  async logout(req, res) {
    try {
      await handleLogout(req, res)
    } catch (error) {
      if (error instanceof RequestError) {
        res.status(error.status || 500).end(error.message)
      } else {
        throw error
      }
    }
  },
  async callback(req, res) {
    try {
      await handleCallback(req, res, { afterCallback })
    } catch (error) {
      if (error instanceof RequestError) {
        res.status(error.status || 500).end(error.message)
      } else {
        throw error
      }
    }
  },
})